Animazione tra visualizzazioni

Scopri come animare tra due visualizzazioni nelle tue app.

Paul Lewis

Spesso, potresti voler spostare gli utenti da una visualizzazione all'altra nell'applicazione, che si tratti di un elenco o di una visualizzazione dei dettagli, oppure di mostrare una barra di navigazione laterale. Le animazioni tra queste visualizzazioni mantengono il coinvolgimento dell'utente e aggiungono ancora più vita ai tuoi progetti.

  • Utilizza le traduzioni per spostarti tra le visualizzazioni; evita di utilizzare left, top o qualsiasi altra proprietà che attivi il layout.
  • Assicurati che le animazioni che usi siano brevi e che le durate siano brevi.
  • Considera come le animazioni e i layout cambiano con l'aumentare delle dimensioni dello schermo; ciò che funziona per uno schermo più piccolo potrebbe apparire strano se utilizzato in un contesto desktop.

L'aspetto e il comportamento di queste transizioni di visualizzazione dipende dal tipo di visualizzazioni con cui si ha a che fare. Ad esempio, l'animazione di un overlay modale nella parte superiore di una vista dovrebbe essere un'esperienza diversa rispetto alla transizione tra un elenco e la visualizzazione dei dettagli.

Usa le traduzioni per spostarti tra le visualizzazioni

Traduzione tra due visualizzazioni.

Per semplificare le cose, supponiamo che esistano due visualizzazioni: una visualizzazione elenco e una visualizzazione dettagli. Quando l'utente tocca una voce all'interno della visualizzazione elenco, entra in gioco la visualizzazione dei dettagli e la visualizzazione elenco.

Visualizza gerarchia.

Per ottenere questo effetto, hai bisogno di un contenitore per entrambe le viste in cui è impostato il criterio overflow: hidden. In questo modo, le due viste possono trovarsi all'interno del contenitore affiancate senza mostrare barre di scorrimento orizzontali e ciascuna vista può scorrere lateralmente all'interno del contenitore in base alle esigenze.

Il CSS per il contenitore è:

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

La posizione del contenitore è impostata su relative. Ciò significa che ogni vista al suo interno può essere posizionata assolutamente nell'angolo in alto a sinistra e quindi spostata con delle trasformazioni. Questo approccio è migliore per il rendimento rispetto all'utilizzo della proprietà left (perché attiva il layout e la colorazione) ed è in genere più facile da razionalizzare.

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

L'aggiunta di transition nella proprietà transform offre un piacevole effetto slide. Per dare un'idea generale, abbiamo deciso di utilizzare una curva cubic-bezier personalizzata, di cui abbiamo parlato nella guida all'ottimizzazione personalizzata.

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

La visualizzazione fuori schermo deve essere traslata verso destra. In questo caso, quindi, la visualizzazione dei dettagli deve essere spostata:

.details-view {
  transform: translateX(100%);
}

Ora è necessaria una piccola quantità di JavaScript per gestire le classi. Questa opzione attiva/disattiva le classi appropriate nelle visualizzazioni.

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
    * Toggles the class on the container so that
    * we choose the correct view.
    */
function onViewChange(evt) {
    container.classList.toggle('view-change');
}

// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);

Infine, aggiungiamo le dichiarazioni CSS per questi corsi.

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

Prova

Potresti ampliare questa funzionalità in modo da includere più visualizzazioni e il concetto di base dovrebbe rimanere invariato: ogni visualizzazione non visibile deve essere fuori schermo e attivata in base alle esigenze, mentre la visualizzazione attualmente sullo schermo deve essere spostata.

Oltre alla transizione tra le visualizzazioni, questa tecnica può essere applicata anche ad altri elementi a scorrimento come gli elementi di navigazione della barra laterale. L'unica vera differenza è che non devi spostare le altre visualizzazioni.

Assicurati che l'animazione funzioni su schermi più grandi

Visualizza la gerarchia su uno schermo di grandi dimensioni.

Per uno schermo più grande, la visualizzazione elenco deve rimanere sempre visualizzata, anziché rimuoverla, e scorrere sulla visualizzazione dei dettagli dal lato destro. È più o meno come gestire una visualizzazione di navigazione.