Visualizzare le transizioni per le applicazioni a pagina singola

Un pattern comune per le pagine web è l'utilizzo di JavaScript per sostituire dinamicamente i contenuti di una pagina, senza caricare un nuovo documento HTML completo. Si tratta di un'applicazione a pagina singola o SPA. Le transizioni di visualizzazione ti consentono di mostrare la continuità o il contesto tra le pagine della tua SPA.

Transizioni a pagina intera

Quando l'utente passa a una nuova visualizzazione nella tua SPA, il framework sostituisce il DOM con nuovi contenuti. In questo modo i contenuti vengono visualizzati, ma cosa succede se vuoi fornire una transizione tra i contenuti attuali e quelli nuovi?

Le transizioni spesso mostrano contemporaneamente la vecchia e la nuova visualizzazione, ad esempio la vecchia visualizzazione sfuma mentre la nuova visualizzazione appare. Poiché i contenuti esistenti vengono sostituiti, questa era una sfida prima delle transizioni di visualizzazione.

Per utilizzare le transizioni di visualizzazione, devi racchiudere la logica per modificare il DOM in un callback. Per questi esempi, abbiamo un'implementazione di base del router fornita da un componente web chiamato MyRouter. La modalità di attivazione delle transizioni di visualizzazione dipende dal router e dal framework che utilizzi.

document.startViewTransition(() => updateTheDOMSomehow());

In questo modo viene attivata la transizione predefinita, che fa scomparire gradualmente la vecchia visualizzazione mentre la nuova viene visualizzata gradualmente.

Che cosa succede? Quando chiami document.startViewTransition(), il browser scatta un'istantanea della vecchia visualizzazione. Quindi chiama la funzione di callback che passi, che aggiorna il DOM alla nuova visualizzazione (ma non la mostra ancora). Al termine della funzione di callback, il browser inizia la transizione ai nuovi contenuti.

// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
  updateTheDOMSomehow();
  return;
} else {
  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Personalizzare la transizione

Come hai visto nell'esempio precedente, la transizione di visualizzazione predefinita fa scomparire gradualmente la vecchia visualizzazione mentre la nuova viene visualizzata gradualmente. Puoi personalizzare la transizione per adattarla meglio allo stile del tuo sito modificando gli pseudo-elementi generati dalle transizioni di visualizzazione.

Puoi specificare la transizione di uscita con ::view-transition-old() e la transizione di entrata con ::view-transition-new(). Puoi anche specificare i valori per entrambi con ::view-transition-group().

In questo esempio, la vecchia visualizzazione uscirà utilizzando la transizione slide-out-to-left e la nuova visualizzazione entrerà utilizzando la transizione slide-in-from-right. Entrambi avranno una durata di 200 millisecondi.

::view-transition-group(root){
  animation-duration: 200ms;
}

::view-transition-old(root) {
  animation-name: slide-out-to-left;
}

::view-transition-new(root) {
  animation-name: slide-in-from-right;
}

Transizioni diverse in base al contesto

Potresti voler utilizzare transizioni diverse in base alle azioni dell'utente. Ad esempio, se facendo clic su un link dalla home page la nuova visualizzazione scorre da destra, ti aspetteresti che facendo clic su un link per tornare alla home page la visualizzazione della home scorra da sinistra.

Puoi specificare animazioni diverse utilizzando la pseudo classe :active-view-transition-type().

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }
}

Puoi quindi scegliere il tipo di transizione della visualizzazione da utilizzare quando chiami document.startViewTransition().

const direction = next === 'home' ? 'backwards' : 'forwards';

document.startViewTransition({
  update: updateTheDOMSomehow,
  types: [direction],
});

Transizione di elementi specifici

Finora hai applicato una transizione solo all'elemento radice per la transizione dell'intera visualizzazione. Tuttavia, puoi anche utilizzare le transizioni di visualizzazione per animare parti specifiche delle pagine.

Ad esempio, potresti avere contenuti nella vecchia visualizzazione che corrispondono a quelli della nuova visualizzazione. Potrebbe trattarsi del titolo dei contenuti o di un'immagine. Potrebbe trattarsi anche di un'immagine in miniatura nella vecchia visualizzazione e di un video nella nuova.

Innanzitutto, devi specificare gli elementi a cui applicare la transizione utilizzando la proprietà view-transition-name. Affinché le transizioni di visualizzazione funzionino, per ogni view-transition-name deve essere presente esattamente un elemento prima di chiamare document.startViewTransition() e esattamente un elemento dopo il completamento del callback in document.startViewTransition().

In questo esempio, è presente un lettore musicale che mostra la copertina dell'album, il titolo e l'artista. Una visualizzazione alternativa mostra gli stessi contenuti riorganizzati, con l'aggiunta del testo del brano.

Nell'esempio precedente, è presente esattamente un elemento di transizione in ciascuna delle visualizzazioni precedente e nuova e condividono persino gli stessi selettori. Gli elementi di transizione sembrano spostarsi tra le loro dimensioni e posizioni. Le parti della visualizzazione non sottoposte a transizione vengono visualizzate in dissolvenza.

Diamo un'occhiata a un esempio più complesso. Ad esempio, la home page di un blog può mostrare un titolo e un'immagine per ogni post, che sono presenti anche nella visualizzazione della pagina completa di un post del blog. Quando passi dalla home page a un post specifico, potresti voler far sembrare che il titolo e l'immagine si spostino nella nuova posizione per fornire un contesto.

Per farlo per il titolo, devi avere un view-transition-name sull'elemento del titolo che sia univoco nella vecchia visualizzazione, condiviso con l'elemento del titolo nella nuova visualizzazione e univoco nella nuova visualizzazione. Si tratta di una sfida, perché la home page contiene più titoli e immagini e non sai su quale farà clic l'utente.

Hai due opzioni per risolvere il problema. Puoi scegliere di aggiungere un view-transition-name univoco per ogni post nella home page e quindi abbinare questo nome a ogni post a pagina intera. Puoi generarle utilizzando l'ID di un post. L'altra opzione è utilizzare un view-transition-name generico, ma applicarlo solo dopo che l'utente ha fatto clic su un post, ma prima di chiamare document.startViewTransition().

Progettazione delle transizioni

Le transizioni di visualizzazione sono un insieme di strumenti che puoi utilizzare per guidare gli utenti e fornire ulteriori suggerimenti sul brand o sul contesto. Probabilmente utilizzerai più tecniche per trovare le transizioni più adatte al tuo sito.

A seconda dell'effetto che vuoi ottenere, potresti anche dover modificare gli elementi o le animazioni. Nell'esempio precedente, sono stati modificati diversi stili per ottenere transizioni fluide.

Il titolo ha la regola width: fit-content, che è uno stile utile quando si esegue la transizione del testo che non va a capo (o che va a capo nello stesso modo nella visualizzazione precedente e in quella nuova). In caso contrario, la transizione potrebbe avvenire tra elementi con larghezze diverse, il che la renderà meno fluida.

Inoltre, l'immagine ha proporzioni diverse nella vecchia e nella nuova visualizzazione. L'esempio modifica l'animazione e la proprietà object-fit in modo che la transizione appaia fluida.

Rispettare prefers-reduced-motion

Un motivo comune per cui gli utenti richiedono il movimento ridotto è che le animazioni a schermo intero, come quelle che si possono ottenere con le transizioni di visualizzazione, possono causare disagio alle persone con disturbi del movimento vestibolare. Puoi disattivare le animazioni utilizzando la media query prefers-reduced-motion. Puoi anche scegliere di fornire animazioni alternative più sottili, ma che trasmettano comunque il modo in cui gli elementi sono collegati.

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Verifica la tua comprensione