Scopri come animare tra due visualizzazioni nelle tue app.
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
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.
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);
}
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
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.