Transizioni per la visualizzazione dello stesso documento per le applicazioni a pagina singola

Jake Archibald
Jake Archibald
X Home page
Bramus

Pubblicato: 17 agosto 2021, ultimo aggiornamento: 25 settembre 2024

Quando una transizione di visualizzazione viene eseguita in un singolo documento, si parla di transizione di visualizzazione all'interno dello stesso documento. Questo è in genere il caso delle applicazioni a pagina singola (SPA) in cui viene utilizzato JavaScript per aggiornare il DOM. Le transizioni tra le visualizzazioni dello stesso documento sono supportate in Chrome a partire dalla versione 111.

Per attivare una transizione di visualizzazione all'interno dello stesso documento, chiama document.startViewTransition:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Quando viene invocato, il browser acquisisce automaticamente gli istantanei di tutti gli elementi in cui è dichiarata una proprietà CSS view-transition-name.

Poi esegue il callback passato che aggiorna il DOM, dopodiché acquisisce gli snapshot del nuovo stato.

Questi snapshot vengono poi disposti in una struttura ad albero di pseudo-elementi e animati utilizzando la potenza delle animazioni CSS. Le coppie di istantanee dello stato precedente e di quello nuovo passano senza interruzioni dalla vecchia posizione e dalle vecchie dimensioni alla nuova posizione, mentre i contenuti vengono visualizzati con dissolvenza incrociata. Se vuoi, puoi utilizzare il CSS per personalizzare le animazioni.

La transizione predefinita: dissolvenza incrociata

La transizione di visualizzazione predefinita è una dissolvenza incrociata, quindi è un'ottima introduzione all'API:

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Dove updateTheDOMSomehow modifica il DOM in base al nuovo stato. Puoi farlo come preferisci. Ad esempio, puoi aggiungere o rimuovere elementi, modificare i nomi delle classi o gli stili.

Le pagine vengono visualizzate con transizione graduale:

La transizione graduale predefinita. Demo minima. Origine.

Ok, una transizione non è poi così impressionante. Fortunatamente, le transizioni possono essere personalizzate, ma prima devi capire come funziona questa transizione in dissolvenza croce di base.

Come funzionano queste transizioni

Aggiorniamo l'esempio di codice precedente.

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

Quando viene chiamato .startViewTransition(), l'API acquisisce lo stato corrente della pagina. Sono incluse le istantanee.

Al termine, viene chiamato il callback passato a .startViewTransition(). È qui che viene modificato il DOM. L'API acquisisce quindi il nuovo stato della pagina.

Una volta acquisito il nuovo stato, l'API crea una struttura ad albero di pseudo-elementi come questa:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

Il ::view-transition si trova in un overlay, sopra a tutti gli altri elementi della pagina. Questa opzione è utile se vuoi impostare un colore di sfondo per la transizione.

::view-transition-old(root) è uno screenshot della vecchia visualizzazione, mentre ::view-transition-new(root) è una rappresentazione in tempo reale della nuova visualizzazione. Entrambi vengono visualizzati come "contenuti sostituiti" CSS (ad esempio un <img>).

La vecchia visualizzazione viene visualizzata da opacity: 1 a opacity: 0, mentre la nuova da opacity: 0 a opacity: 1, creando una transizione sfumata.

Tutta l'animazione viene eseguita utilizzando animazioni CSS, quindi possono essere personalizzate con CSS.

Personalizzare la transizione

Tutti gli pseudo-elementi di transizione della visualizzazione possono essere scelti come target con CSS e, poiché le animazioni sono definite utilizzando CSS, puoi modificarle utilizzando le proprietà di animazione CSS esistenti. Ad esempio:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}

Con questa modifica, l'effetto dissolvenza è ora molto lento:

Transizione graduale lunga. Demo minima. Origine.

Ok, non è ancora impressionante. Il codice seguente implementa invece la transizione dell'asse condiviso di Material Design:

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

Ed ecco il risultato:

Transizione dell'asse condiviso. Demo minima. Origine.

Applicare transizioni a più elementi

Nella demo precedente, l'intera pagina è coinvolta nella transizione dell'asse condiviso. Funziona per la maggior parte della pagina, ma non sembra adatto all'intestazione, in quanto esce solo per rientrare di nuovo.

Per evitare questo problema, puoi estrarre l'intestazione dal resto della pagina in modo che possa essere animata separatamente. Questo viene fatto assegnando un view-transition-name all'elemento.

.main-header {
  view-transition-name: main-header;
}

Il valore di view-transition-name può essere qualsiasi (tranne none, che indica che non esiste un nome di transizione). Viene utilizzato per identificare in modo univoco l'elemento durante la transizione.

Il risultato è:

Transizione dell'asse condiviso con intestazione fissa. Demo minima. Origine.

Ora l'intestazione rimane in posizione e si attenua.

Questa dichiarazione CSS ha causato la modifica dell'albero di pseudo-elementi:

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(main-header)
   └─ ::view-transition-image-pair(main-header)
      ├─ ::view-transition-old(main-header)
      └─ ::view-transition-new(main-header)

Ora sono presenti due gruppi di transizione. Uno per l'intestazione e un altro per il resto. Questi elementi possono essere scelti come target in modo indipendente con CSS e possono essere assegnate transizioni diverse. Tuttavia, in questo caso a main-header è stata lasciata la transizione predefinita, ovvero una dissolvenza incrociata.

Ok, la transizione predefinita non è solo una dissolvenza incrociata, ::view-transition-group esegue anche le seguenti transizioni:

  • Posizione e trasformazione (utilizzando un transform)
  • Larghezza
  • Altezza

Fino a questo momento non aveva importanza, perché l'intestazione ha le stesse dimensioni e la stessa posizione su entrambi i lati del DOM. Puoi anche estrarre il testo nell'intestazione:

.main-header-text {
  view-transition-name: main-header-text;
  width: fit-content;
}

fit-content viene utilizzato in modo che l'elemento abbia le dimensioni del testo, anziché estendersi alla larghezza rimanente. In caso contrario, la freccia Indietro riduce le dimensioni dell'elemento di testo dell'intestazione, anziché mantenere le stesse dimensioni in entrambe le pagine.

Ora abbiamo tre parti da utilizzare:

::view-transition
├─ ::view-transition-group(root)
│  └─ …
├─ ::view-transition-group(main-header)
│  └─ …
└─ ::view-transition-group(main-header-text)
   └─ …

Ma, di nuovo, utilizziamo i valori predefiniti:

Testo dell'intestazione scorrevole. Demo minima. Origine.

Ora il testo del titolo scorre leggermente per fare spazio al pulsante Indietro.

Animare più pseudo-elementi nello stesso modo con view-transition-class

Supporto dei browser

  • Chrome: 125.
  • Bordo: 125.
  • Firefox: non supportato.
  • Safari Technology Preview: supportato.

Supponiamo che tu abbia una transizione di visualizzazione con una serie di schede, ma anche un titolo nella pagina. Per animare tutte le schede tranne il titolo, devi scrivere un selettore che abbia come target ogni singola scheda.

h1 {
    view-transition-name: title;
}
::view-transition-group(title) {
    animation-timing-function: ease-in-out;
}

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
…
#card20 { view-transition-name: card20; }

::view-transition-group(card1),
::view-transition-group(card2),
::view-transition-group(card3),
::view-transition-group(card4),
…
::view-transition-group(card20) {
    animation-timing-function: var(--bounce);
}

Hai 20 elementi? Sono 20 i selettori che devi scrivere. Vuoi aggiungere un nuovo elemento? Devi anche espandere il selettore che applica gli stili di animazione. Non è esattamente scalabile.

view-transition-class può essere utilizzato negli pseudo-elementi di transizione della visualizzazione per applicare la stessa regola di stile.

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
#card5 { view-transition-name: card5; }
…
#card20 { view-transition-name: card20; }

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

L'esempio di schede che segue sfrutta lo snippet CSS precedente. A tutte le schede, incluse quelle appena aggiunte, viene applicato lo stesso timing con un solo selettore: html::view-transition-group(.card).

Registrazione della demo di Schede. Se utilizzi view-transition-class, viene applicato lo stesso animation-timing-function a tutte le schede, tranne a quelle aggiunte o rimosse.

Eseguire il debug delle transizioni

Poiché le transizioni delle visualizzazioni si basano sulle animazioni CSS, il riquadro Animazioni in Chrome DevTools è ideale per il debug delle transizioni.

Utilizzando il riquadro Animazioni, puoi mettere in pausa l'animazione successiva, quindi scorrere avanti e indietro nell'animazione. Durante questa operazione, gli pseudo-elementi di transizione sono disponibili nel riquadro Elementi.

Eseguire il debug delle transizioni di visualizzazione con Chrome DevTools
.

Gli elementi in transizione non devono essere necessariamente dello stesso elemento DOM

Finora abbiamo utilizzato view-transition-name per creare elementi di transizione separati per l'intestazione e il testo dell'intestazione. Si tratta concettualmente dello stesso elemento prima e dopo la modifica del DOM, ma puoi creare transizioni in caso contrario.

Ad esempio, all'embed del video principale può essere assegnato un view-transition-name:

.full-embed {
  view-transition-name: full-embed;
}

Poi, quando viene fatto clic sulla miniatura, è possibile assegnare lo stesso view-transition-name, solo per la durata della transizione:

thumbnail.onclick = async () => {
  thumbnail.style.viewTransitionName = 'full-embed';

  document.startViewTransition(() => {
    thumbnail.style.viewTransitionName = '';
    updateTheDOMSomehow();
  });
};

E il risultato:

Un elemento in transizione a un altro. Demo minima. Origine.

La miniatura ora passa all'immagine principale. Anche se sono elementi concettualmente (e letteralmente) diversi, l'API di transizione li tratta come la stessa cosa perché condividono lo stesso view-transition-name.

Il codice reale per questa transizione è un po' più complicato rispetto all'esempio precedente, in quanto gestisce anche il ritorno alla pagina delle miniature. Consulta il codice sorgente per l'implementazione completa.

Transizioni di entrata e di uscita personalizzate

Guarda questo esempio:

Apri e chiudi la barra laterale. Demo minima. Origine.

La barra laterale fa parte della transizione:

.sidebar {
  view-transition-name: sidebar;
}

Tuttavia, a differenza dell'intestazione nell'esempio precedente, la barra laterale non viene visualizzata su tutte le pagine. Se entrambi gli stati hanno la barra laterale, gli pseudo-elementi di transizione hanno il seguente aspetto:

::view-transition
├─ …other transition groups…
└─ ::view-transition-group(sidebar)
   └─ ::view-transition-image-pair(sidebar)
      ├─ ::view-transition-old(sidebar)
      └─ ::view-transition-new(sidebar)

Tuttavia, se la barra laterale è presente solo nella nuova pagina, lo pseudo-elemento ::view-transition-old(sidebar) non sarà presente. Poiché non esiste un'immagine "vecchia" per la barra laterale, la coppia di immagini avrà solo un ::view-transition-new(sidebar). Analogamente, se la barra laterale è presente solo nella vecchia pagina, la coppia di immagini avrà solo un ::view-transition-old(sidebar).

Nella demo precedente, la barra laterale effettua transizioni diverse a seconda che sia in entrata, in uscita o presente in entrambi gli stati. Entra scorrendo da destra e attenuandosi, esce scorrendo verso destra e attenuandosi e rimane in posizione quando è presente in entrambi gli stati.

Per creare transizioni di entrata e di uscita specifiche, puoi utilizzare la pseudo-classe :only-child per scegliere come target gli pseudo-elementi vecchi o nuovi quando sono gli unici elementi secondari nella coppia di immagini:

/* Entry transition */
::view-transition-new(sidebar):only-child {
  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Exit transition */
::view-transition-old(sidebar):only-child {
  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}

In questo caso, non esiste una transizione specifica per quando la barra laterale è presente in entrambi gli stati, poiché il valore predefinito è perfetto.

Aggiornamenti DOM asincroni e attesa dei contenuti

Il callback passato a .startViewTransition() può restituire una promessa, che consente aggiornamenti DOM asincroni e l'attesa del completamento di contenuti importanti.

document.startViewTransition(async () => {
  await something;
  await updateTheDOMSomehow();
  await somethingElse;
});

La transizione non verrà avviata finché la promessa non verrà soddisfatta. Durante questo periodo, la pagina viene bloccata, quindi i ritardi dovrebbero essere ridotti al minimo. In particolare, i recuperi di rete devono essere eseguiti prima di chiamare .startViewTransition(), mentre la pagina è ancora completamente interattiva, anziché all'interno del callback di .startViewTransition().

Se decidi di attendere che le immagini o i caratteri siano pronti, assicurati di utilizzare un timeout aggressivo:

const wait = ms => new Promise(r => setTimeout(r, ms));

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

  // Pause for up to 100ms for fonts to be ready:
  await Promise.race([document.fonts.ready, wait(100)]);
});

Tuttavia, in alcuni casi è meglio evitare del tutto il ritardo e utilizzare i contenuti di cui già disponi.

Sfrutta al meglio i contenuti di cui già disponi

Se la miniatura passa a un'immagine più grande:

La miniatura passa a un'immagine più grande. Prova il sito demo.

La transizione predefinita è la dissolvenza incrociata, il che significa che la miniatura potrebbe essere in dissolvenza incrociata con un'immagine completa non ancora caricata.

Un modo per gestire questo problema è attendere il caricamento dell'immagine completa prima di avviare la transizione. Idealmente, questa operazione dovrebbe essere eseguita prima di chiamare .startViewTransition(), in modo che la pagina rimanga interattiva e sia possibile mostrare un'animazione di attesa per indicare all'utente che le risorse sono in fase di caricamento. In questo caso, però, esiste un modo migliore:

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
}

Ora la miniatura non scompare, ma rimane sotto l'immagine completa. Ciò significa che, se la nuova visualizzazione non è stata caricata, la miniatura è visibile durante la transizione. Ciò significa che la transizione può iniziare immediatamente e l'immagine completa può essere caricata in base ai tempi necessari.

Questo non funzionerebbe se la nuova visualizzazione fosse trasparente, ma in questo caso sappiamo che non lo è, quindi possiamo eseguire questa ottimizzazione.

Gestire le modifiche delle proporzioni

Per fortuna, finora tutte le transizioni sono state a elementi con le stesse proporzioni, ma non sarà sempre così. Cosa succede se la miniatura è 1:1 e l'immagine principale è 16:9?

Un elemento in transizione a un altro, con una modifica del formato. Demo minima. Origine.

Nella transizione predefinita, il gruppo viene animato dalle dimensioni precedenti a quelle successive. Le visualizzazioni precedenti e nuove hanno una larghezza del 100% del gruppo e un'altezza automatica, il che significa che mantengono le proporzioni indipendentemente dalle dimensioni del gruppo.

Si tratta di un valore predefinito valido, ma non è quello che ci serve in questo caso. Pertanto:

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
  /* Make the height the same as the group,
  meaning the view size might not match its aspect-ratio. */
  height: 100%;
  /* Clip any overflow of the view */
  overflow: clip;
}

/* The old view is the thumbnail */
::view-transition-old(full-embed) {
  /* Maintain the aspect ratio of the view,
  by shrinking it to fit within the bounds of the element */
  object-fit: contain;
}

/* The new view is the full image */
::view-transition-new(full-embed) {
  /* Maintain the aspect ratio of the view,
  by growing it to cover the bounds of the element */
  object-fit: cover;
}

Ciò significa che la miniatura rimane al centro dell'elemento man mano che la larghezza aumenta, ma l'immagine completa viene "ricroppata" durante la transizione da 1:1 a 16:9.

Per informazioni più dettagliate, consulta Transizioni di visualizzazione: gestione delle modifiche del formato

Utilizzare le query sui media per modificare le transizioni per diversi stati del dispositivo

Potresti voler utilizzare transizioni diverse sui dispositivi mobili rispetto ai computer, ad esempio in questo esempio viene eseguita una transizione completa dal lato su dispositivo mobile, ma una transizione più sottile su computer:

Un elemento in transizione a un altro. Demo minima. Origine.

Questo risultato può essere ottenuto utilizzando query sui contenuti multimediali standard:

/* Transitions for mobile */
::view-transition-old(root) {
  animation: 300ms ease-out both full-slide-to-left;
}

::view-transition-new(root) {
  animation: 300ms ease-out both full-slide-from-right;
}

@media (min-width: 500px) {
  /* Overrides for larger displays.
  This is the shared axis transition from earlier in the article. */
  ::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }

  ::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }
}

Ti consigliamo inoltre di modificare gli elementi a cui assegni un view-transition-name in base alle query sui media corrispondenti.

Rispondere alla preferenza "movimento ridotto"

Gli utenti possono indicare la preferenza per la riduzione dei movimenti tramite il sistema operativo e questa preferenza è messa in evidenza in CSS.

Puoi scegliere di impedire qualsiasi transizione per questi utenti:

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

Tuttavia, la preferenza per "movimento ridotto" non significa che l'utente non voglia nessun movimento. Anziché lo snippet precedente, puoi scegliere un'animazione più sottile, ma che esprima comunque la relazione tra gli elementi e il flusso di dati.

Gestire più stili di transizione delle visualizzazioni con i tipi di transizione delle visualizzazioni

Supporto dei browser

  • Chrome: 125.
  • Bordo: 125.
  • Firefox: non supportato.
  • Safari: 18.

A volte, una transizione da una visualizzazione specifica a un'altra deve essere personalizzata in modo specifico. Ad esempio, quando passi alla pagina successiva o precedente in una sequenza di paginazione, potresti voler far scorrere i contenuti in una direzione diversa a seconda che tu stia passando a una pagina più alta o più bassa della sequenza.

Registrazione della demo di paginazione. Utilizza transizioni diverse a seconda della pagina che stai visitando.

A questo scopo, puoi utilizzare i tipi di transizione di visualizzazione, che ti consentono di assegnare uno o più tipi a una transizione di visualizzazione attiva. Ad esempio, quando passi a una pagina precedente in una sequenza di impaginazione, utilizza il tipo forwards e quando passi a una pagina successiva, utilizza il tipo backwards. Questi tipi sono attivi solo durante l'acquisizione o l'esecuzione di una transizione e ogni tipo può essere personalizzato tramite CSS per utilizzare animazioni diverse.

Per utilizzare i tipi in una transizione di visualizzazione dello stesso documento, devi passare types al metodo startViewTransition. Per consentire questo, document.startViewTransition accetta anche un oggetto: update è la funzione di callback che aggiorna il DOM e types è un array con i tipi.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
});

Per rispondere a questi tipi, utilizza il selettore :active-view-transition-type(). Passa il type che vuoi scegliere come target nel selettore. In questo modo puoi mantenere separati gli stili di più transizioni di visualizzazione, senza che le dichiarazioni di una interferiscano con quelle dell'altra.

Poiché i tipi vengono applicati solo durante l'acquisizione o l'esecuzione della transizione, puoi utilizzare il selettore per impostare o annullare l'impostazione di un view-transition-name su un elemento solo per la transizione di visualizzazione con quel tipo.

/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
  :root {
    view-transition-name: none;
  }
  article {
    view-transition-name: content;
  }
  .pagination {
    view-transition-name: pagination;
  }
}

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Animation styles for reload type only (using the default root snapshot) */
html:active-view-transition-type(reload) {
  &::view-transition-old(root) {
    animation-name: fade-out, scale-down;
  }
  &::view-transition-new(root) {
    animation-delay: 0.25s;
    animation-name: fade-in, scale-up;
  }
}

Nella seguente demo di impaginazione, i contenuti della pagina scorrono in avanti o indietro in base al numero di pagina a cui stai passando. I tipi vengono determinati al momento del clic e poi trasmessi a document.startViewTransition.

Per scegliere come target qualsiasi transizione di visualizzazione attiva, indipendentemente dal tipo, puoi utilizzare il selettore di pseudo-classi :active-view-transition.

html:active-view-transition {
    …
}

Gestire più stili di transizione della visualizzazione con un nome di classe nella radice della transizione della visualizzazione

A volte, una transizione da un determinato tipo di visualizzazione a un altro deve avere una transizione personalizzata in modo specifico. In alternativa, la navigazione "indietro" deve essere diversa da quella "avanti".

Transizioni diverse quando torni indietro. Demo minima. Origine.

Prima dei tipi di transizione, il modo per gestire questi casi era impostare temporaneamente un nome classe nella radice della transizione. Quando chiami document.startViewTransition, questa radice di transizione è l'elemento <html>, accessibile utilizzando document.documentElement in JavaScript:

if (isBackNavigation) {
  document.documentElement.classList.add('back-transition');
}

const transition = document.startViewTransition(() =>
  updateTheDOMSomehow(data)
);

try {
  await transition.finished;
} finally {
  document.documentElement.classList.remove('back-transition');
}

Per rimuovere le classi al termine della transizione, questo esempio utilizza transition.finished, una promessa che si risolve quando la transizione ha raggiunto il suo stato finale. Le altre proprietà di questo oggetto sono descritte nel riferimento dell'API.

Ora puoi utilizzare il nome della classe nel CSS per modificare la transizione:

/* 'Forward' transitions */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms
      cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Overrides for 'back' transitions */
.back-transition::view-transition-old(root) {
  animation-name: fade-out, slide-to-right;
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, slide-from-left;
}

Come per le media query, la presenza di queste classi può essere utilizzata anche per modificare gli elementi che ricevono un view-transition-name.

Eseguire transizioni senza bloccare altre animazioni

Guarda questa demo di una transizione di posizione del video:

Transizione video. Demo minima. Origine.

Hai notato qualche problema? Non preoccuparti se non l'hai fatto. Eccolo rallentato:

Transizione video, più lenta. Demo minima. Origine.

Durante la transizione, il video sembra bloccarsi, poi la versione riprodotta viene visualizzata gradualmente. Questo perché ::view-transition-old(video) è uno screenshot della vecchia visualizzazione, mentre ::view-transition-new(video) è un'immagine in tempo reale della nuova visualizzazione.

Puoi risolvere il problema, ma prima chiediti se vale la pena farlo. Se non hai notato il "problema" quando la transizione veniva riprodotta alla velocità normale, non preoccuparti di cambiarla.

Se vuoi davvero correggerlo, non mostrare ::view-transition-old(video); passa direttamente a ::view-transition-new(video). Puoi farlo sostituendo gli stili e le animazioni predefiniti:

::view-transition-old(video) {
  /* Don't show the frozen old view */
  display: none;
}

::view-transition-new(video) {
  /* Don't fade the new view in */
  animation: none;
}

È tutto.

Transizione video, più lenta. Demo minima. Origine.

Ora il video viene riprodotto durante la transizione.

Integrazione con l'API Navigation (e altri framework)

Le transizioni di visualizzazione vengono specificate in modo da poter essere integrate con altri framework o librerie. Ad esempio, se la tua applicazione a pagina singola (SPA) utilizza un router, puoi modificare il meccanismo di aggiornamento del router per aggiornare i contenuti utilizzando una transizione di visualizzazione.

Nel seguente snippet di codice tratto da questa demo di paginazione, il gestore di intercettazione dell'API Navigation è modificato in modo da chiamare document.startViewTransition quando le transizioni di visualizzazione sono supportate.

navigation.addEventListener("navigate", (e) => {
    // Don't intercept if not needed
    if (shouldNotIntercept(e)) return;

    // Intercept the navigation
    e.intercept({
        handler: async () => {
            // Fetch the new content
            const newContent = await fetchNewContent(e.destination.url, {
                signal: e.signal,
            });

            // The UA does not support View Transitions, or the UA
            // already provided a Visual Transition by itself (e.g. swipe back).
            // In either case, update the DOM directly
            if (!document.startViewTransition || e.hasUAVisualTransition) {
                setContent(newContent);
                return;
            }

            // Update the content using a View Transition
            const t = document.startViewTransition(() => {
                setContent(newContent);
            });
        }
    });
});

Alcuni browser, ma non tutti, forniscono la propria transizione quando l'utente esegue un gesto di scorrimento per navigare. In questo caso, non dovresti attivare la transizione di visualizzazione, in quanto ciò potrebbe comportare un'esperienza utente scadente o confusa. L'utente vedrà due transizioni, una fornita dal browser e l'altra da te, in sequenza.

Pertanto, è consigliabile impedire l'avvio di una transizione di visualizzazione quando il browser ha fornito la propria transizione visiva. Per farlo, controlla il valore della proprietà hasUAVisualTransition dell'istanza NavigateEvent. La proprietà viene impostata su true quando il browser ha fornito una transizione visiva. Questa proprietà hasUIVisualTransition esiste anche nelle istanze PopStateEvent.

Nello snippet precedente, il controllo che determina se eseguire la transizione di visualizzazione prende in considerazione questa proprietà. Quando non è supportata la transizione tra visualizzazioni dello stesso documento o quando il browser ha già fornito la propria transizione, la transizione della visualizzazione viene saltata.

if (!document.startViewTransition || e.hasUAVisualTransition) {
  setContent(newContent);
  return;
}

Nella registrazione seguente, l'utente scorre per tornare alla pagina precedente. Lo screenshot a sinistra non include un controllo per l'indicatore hasUAVisualTransition. La registrazione a destra include il controllo, quindi salta la transizione di visualizzazione manuale perché il browser ha fornito una transizione visiva.

Confronto dello stesso sito senza (a sinistra) e con larghezza (a destra) un controllo per hasUAVisualTransition

Animazione con JavaScript

Finora, tutte le transizioni sono state definite utilizzando il CSS, ma a volte il CSS non è sufficiente:

Transizione circolare. Demo minima. Origine.

Alcune parti di questa transizione non possono essere realizzate solo con CSS:

  • L'animazione inizia dalla posizione del clic.
  • L'animazione termina con il cerchio che ha un raggio fino all'angolo più lontano. Tuttavia, speriamo che questo sarà possibile con CSS in futuro.

Fortunatamente, puoi creare transizioni utilizzando l'API Web Animation.

let lastClick;
addEventListener('click', event => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );

  // With a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in',
        // Specify which pseudo-element to animate
        pseudoElement: '::view-transition-new(root)',
      }
    );
  });
}

Questo esempio utilizza transition.ready, una promessa che si risolve una volta creati gli pseudo-elementi di transizione. Le altre proprietà di questo oggetto sono descritte nel riferimento dell'API.

Transizioni come miglioramento

L'API View Transition è progettata per "avvolgere" una modifica DOM e creare una transizione. Tuttavia, la transizione deve essere considerata un miglioramento, ovvero l'app non deve entrare in uno stato di "errore" se la modifica del DOM va a buon fine, ma la transizione non riesce. Idealmente, la transizione non dovrebbe fallire, ma se ciò accade, non deve interrompere il resto dell'esperienza utente.

Per trattare le transizioni come un miglioramento, fai attenzione a non utilizzare le promesse di transizione in modo che l'app non generi un errore se la transizione non va a buon fine.

Cosa non fare
async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  await transition.ready;

  document.documentElement.animate(
    {
      clipPath: [`inset(50%)`, `inset(0)`],
    },
    {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: '::view-transition-new(root)',
    }
  );
}

Il problema di questo esempio è che switchView() viene rifiutato se la transizione non riesce a raggiungere uno stato ready, ma questo non significa che il passaggio alla visualizzazione non sia riuscito. Il DOM potrebbe essere stato aggiornato correttamente, ma erano presenti view-transition-name duplicati, pertanto la transizione è stata saltata.

Invece:

Cosa fare
async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  animateFromMiddle(transition);

  await transition.updateCallbackDone;
}

async function animateFromMiddle(transition) {
  try {
    await transition.ready;

    document.documentElement.animate(
      {
        clipPath: [`inset(50%)`, `inset(0)`],
      },
      {
        duration: 500,
        easing: 'ease-in',
        pseudoElement: '::view-transition-new(root)',
      }
    );
  } catch (err) {
    // You might want to log this error, but it shouldn't break the app
  }
}

Questo esempio utilizza transition.updateCallbackDone per attendere l'aggiornamento del DOM e per rifiutare se non va a buon fine. switchView non rifiuta più se la transizione non va a buon fine, si risolve al termine dell'aggiornamento del DOM e rifiuta se non va a buon fine.

Se vuoi che switchView venga risolto quando la nuova visualizzazione è "stabilizzata", ovvero quando qualsiasi transizione animata è stata completata o è stata saltata fino alla fine, sostituisci switchView con transition.finished.transition.updateCallbackDone

Non è un polyfill, ma…

Non è una funzionalità facile da eseguire il polyfill. Tuttavia, questa funzione di supporto semplifica molto le cose nei browser che non supportano le transizioni di visualizzazione:

function transitionHelper({
  skipTransition = false,
  types = [],
  update,
}) {

  const unsupported = (error) => {
    const updateCallbackDone = Promise.resolve(update()).then(() => {});

    return {
      ready: Promise.reject(Error(error)),
      updateCallbackDone,
      finished: updateCallbackDone,
      skipTransition: () => {},
      types,
    };
  }

  if (skipTransition || !document.startViewTransition) {
    return unsupported('View Transitions are not supported in this browser');
  }

  try {
    const transition = document.startViewTransition({
      update,
      types,
    });

    return transition;
  } catch (e) {
    return unsupported('View Transitions with types are not supported in this browser');
  }
}

e può essere utilizzato in questo modo:

function spaNavigate(data) {
  const types = isBackNavigation ? ['back-transition'] : [];

  const transition = transitionHelper({
    update() {
      updateTheDOMSomehow(data);
    },
    types,
  });

  // …
}

Nei browser che non supportano le transizioni di visualizzazione, updateDOM verrà comunque chiamato, ma non verrà visualizzata una transizione animata.

Puoi anche fornire alcuni classNames da aggiungere a <html> durante la transizione, in modo da modificare più facilmente la transizione a seconda del tipo di navigazione.

Puoi anche passare true a skipTransition se non vuoi un'animazione, anche nei browser che supportano le transizioni di visualizzazione. Questa opzione è utile se il tuo sito ha una preferenza utente per disattivare le transizioni.

Utilizzo dei framework

Se utilizzi una libreria o un framework che esegue l'astrazione delle modifiche DOM, la parte difficile è sapere quando la modifica DOM è completata. Ecco un insieme di esempi che utilizzano l'helper riportato sopra in vari framework.

  • React: la chiave qui è flushSync, che applica in modo sincrono un insieme di modifiche dello stato. Sì, c'è un avviso importante sull'utilizzo di questa API, ma Dan Abramov mi assicura che è appropriata in questo caso. Come di consueto con React e il codice asincrono, quando utilizzi le varie promesse restituite da startViewTransition, assicurati che il codice venga eseguito con lo stato corretto.
  • Vue.js: la chiave qui è nextTick, che viene soddisfatta una volta aggiornato il DOM.
  • Svelte: molto simile a Vue, ma il metodo per attendere la modifica successiva è tick.
  • Lit: la chiave qui è la promessa this.updateComplete all'interno dei componenti, che viene soddisfatta una volta aggiornato il DOM.
  • Angular: la chiave qui è applicationRef.tick, che esegue lo svuotamento delle modifiche DOM in attesa. A partire dalla versione 17 di Angular, puoi utilizzare withViewTransitions incluso in @angular/router.

Riferimento API

const viewTransition = document.startViewTransition(update)

Avvia un nuovo ViewTransition.

update è una funzione che viene chiamata dopo aver acquisito lo stato corrente del documento.

Quando la promessa restituita da updateCallback viene soddisfatta, la transizione inizia nel frame successivo. Se la promessa restituita da updateCallback viene rifiutata, la transizione viene abbandonata.

const viewTransition = document.startViewTransition({ update, types })

Avvia un nuovo ViewTransition con i tipi specificati

update viene chiamato dopo aver acquisito lo stato corrente del documento.

types imposta i tipi attivi per la transizione quando la acquisisci o la esegui. È inizialmente vuoto. Per ulteriori informazioni, consulta viewTransition.types di seguito.

Membri dell'istanza di ViewTransition:

viewTransition.updateCallbackDone

Una promessa che viene soddisfatta quando la promessa restituita da updateCallback viene soddisfatta o rifiutata quando viene rifiutata.

L'API View Transition racchiude una modifica del DOM e crea una transizione. Tuttavia, a volte non ti interessa l'esito positivo o negativo dell'animazione di transizione, ma vuoi solo sapere se e quando si verifica la modifica del DOM. updateCallbackDone è per quel caso d'uso.

viewTransition.ready

Una promessa che viene soddisfatta una volta creati gli pseudo-elementi per la transizione e l'animazione sta per iniziare.

Viene rifiutato se la transizione non può iniziare. Ciò può essere dovuto a una configurazione errata, ad esempio view-transition-name duplicati, o se updateCallback restituisce una promessa rifiutata.

Questo è utile per animare gli pseudo-elementi di transizione con JavaScript.

viewTransition.finished

Una promessa che viene soddisfatta quando lo stato finale è completamente visibile e interattivo per l'utente.

Viene rifiutato solo se updateCallback restituisce una promessa rifiutata, in quanto indica che lo stato finale non è stato creato.

In caso contrario, se l'inizio di una transizione non va a buon fine o viene saltata durante la transizione, lo stato finale viene comunque raggiunto, quindi finished soddisfa.

viewTransition.types

Un oggetto simile a Set che contiene i tipi di transizione della visualizzazione attiva. Per manipolare le voci, utilizza i metodi di istanza clear(), add() e delete().

Per rispondere a un tipo specifico in CSS, utilizza il selettore della pseudo-classe :active-view-transition-type(type) nella radice della transizione.

I tipi vengono ripuliti automaticamente al termine della transizione di visualizzazione.

viewTransition.skipTransition()

Salta la parte di animazione della transizione.

La chiamata a updateCallback non verrà saltata, poiché la modifica del DOM è separata dalla transizione.

Riferimento allo stile e alla transizione predefiniti

::view-transition
L'elemento pseudo-radice che riempie l'area visibile e contiene ogni ::view-transition-group.
::view-transition-group

Posizionato in modo assoluto.

Le transizioni width e height tra gli stati "prima" e "dopo".

Transizioni transform tra il quadrangolo dello spazio viewport "prima" e "dopo".

::view-transition-image-pair

Posizionato in modo assoluto per riempire il gruppo.

Ha isolation: isolate per limitare l'effetto del mix-blend-mode sulle visualizzazioni precedenti e nuove.

::view-transition-new e ::view-transition-old

Posizionato in modo assoluto in alto a sinistra del wrapper.

Riempie il 100% della larghezza del gruppo, ma ha un'altezza automatica, quindi manterrà le proporzioni anziché riempire il gruppo.

Deve avere mix-blend-mode: plus-lighter per consentire una transizione graduale reale.

La vecchia visualizzazione passa da opacity: 1 a opacity: 0. La nuova visualizzazione passa da opacity: 0 a opacity: 1.

Feedback

I feedback degli sviluppatori sono sempre apprezzati. A tale scopo, segnala un problema al gruppo di lavoro CSS su GitHub con suggerimenti e domande. Prefissa il problema con [css-view-transitions].

Se riscontri un bug, segnala un bug di Chromium.