Animazione tra visualizzazioni

Scopri come eseguire animazioni tra due visualizzazioni nelle tue app.

Spesso è necessario spostare gli utenti da una visualizzazione all'altra nella tua applicazione, ad esempio da un elenco a una visualizzazione dei dettagli o mostrare una barra laterale di navigazione. Le animazioni tra queste visualizzazioni mantengono l'utente coinvolto 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 utilizzi siano rapide e che le durate siano brevi.
• Considera come cambiano le animazioni e i layout con l'aumentare delle dimensioni delle schermate; ciò che funziona su uno schermo più piccolo può sembrare strano se utilizzato in un computer.

L'aspetto e il comportamento di queste transizioni di visualizzazione dipendono dal tipo di visualizzazioni con cui hai a che fare. Ad esempio, l'animazione di un overlay modale sopra una visualizzazione dovrebbe essere un'esperienza diversa dal passaggio da una visualizzazione elenco a una visualizzazione dei dettagli.

Utilizzare le traduzioni per spostarsi da una visualizzazione all'altra

Per semplificare, supponiamo che esistano due visualizzazioni: una visualizzazione elenco e una visualizzazione dettagliata. Quando l'utente tocca un elemento dell'elenco all'interno della visualizzazione elenco, la visualizzazione dei dettagli scorre in entrata e la visualizzazione elenco all'esterno.

Per ottenere questo effetto, devi avere un contenitore per entrambe le visualizzazioni con overflow: hidden impostato. In questo modo, le due visualizzazioni possono essere affiancate all'interno del contenitore senza mostrare barre di scorrimento orizzontali e ogni visualizzazione può scorrere 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 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 un transition alla proprietà transform offre un piacevole effetto di scorrimento. Per un'esperienza piacevole, viene utilizzata una curva cubic-bezier personalizzata, di cui abbiamo parlato nella guida all'attenuazione personalizzata.

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

La visualizzazione non visibile sullo schermo deve essere tradotta a destra, quindi in questo caso la visualizzazione dei dettagli deve essere spostata:

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

Ora è necessaria una piccola quantità di JavaScript per gestire le classi. In questo modo, i corsi appropriati vengono visualizzati.

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 queste classi.

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

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

Prova

Potresti espandere questo riquadro in modo da includere più visualizzazioni, senza modificare il concetto di base: ogni visualizzazione non visibile deve essere fuori schermo e attivata secondo necessità, mentre quella attualmente sullo schermo deve essere spostata.

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

Assicurati che l'animazione funzioni su schermi più grandi

Per uno schermo più grande, ti consigliamo di mantenere sempre attiva la visualizzazione elenco anziché rimuoverla e di scorrere verso la visualizzazione dei dettagli dal lato destro. È praticamente lo stesso che gestire una visualizzazione di navigazione.