View Transitions API

La View Transitions API (Chrome 111+) consente transizioni fluide e animate tra stati diversi di una pagina o tra navigazioni di pagina. Cattura schermate prima e dopo il cambiamento e le trasforma l'una nell'altra usando animazioni CSS, permettendo di ottenere sul web transizioni simili a quelle delle app.

Avvii una transizione nella stessa pagina racchiudendo un aggiornamento del DOM in document.startViewTransition(() => updateDom()). Il browser cattura lo stato precedente, esegue l'aggiornamento, cattura il nuovo stato e applica automaticamente una dissolvenza incrociata tra i due.

Senza alcun CSS, View Transitions esegue una semplice dissolvenza incrociata tra lo stato precedente e quello nuovo della pagina. Questa singola riga di JavaScript aggiunge una transizione curata che in precedenza richiedeva un'orchestrazione complessa di animazioni CSS o una libreria di animazione dedicata.

L'API espone quattro pseudo-elementi: ::view-transition (overlay principale), ::view-transition-old(root) (schermata della pagina precedente), ::view-transition-new(root) (schermata della nuova pagina) e ::view-transition-image-pair(root). Li personalizzi con animazioni CSS.

Assegni view-transition-name: hero-image a un elemento che rimane presente durante la transizione. L'API trasforma questo elemento dalla posizione e dimensione precedenti a quelle nuove, creando automaticamente un'animazione fluida a livello di elemento.

Sostituisca la dissolvenza incrociata predefinita con keyframe personalizzati sui pseudo-elementi: faccia scorrere l'elemento da destra per la navigazione in avanti e da sinistra per tornare indietro. Applichi @keyframes a ::view-transition-new(root) e ::view-transition-old(root).

Le View Transitions tra documenti (Chrome 126+) animano le navigazioni complete tra pagine nelle applicazioni multipagina. Aggiunga @view-transition { navigation: auto; } al CSS: il browser gestirà automaticamente la transizione tra le pagine HTML, senza bisogno di JavaScript.

Gli utenti con disturbi vestibolari non dovrebbero essere esposti a transizioni ricche di movimento. Racchiuda le animazioni di transizione in @media (prefers-reduced-motion: no-preference) per disabilitare le animazioni personalizzate per chi preferisce un movimento ridotto, mantenendo comunque l'aggiornamento funzionale del DOM.

React Router v6.4+, Vue Router e Astro supportano View Transitions. I framework racchiudono automaticamente i cambi di route in startViewTransition. Configuri gli stili delle transizioni per ogni route con view-transition-name sugli elementi persistenti, come la navigazione e i gusci del layout.

View Transitions cattura schermate della pagina, un'operazione che può essere costosa nei layout complessi. Pagine estese con molti livelli compositati possono mostrare scatti durante la cattura. Mantenga la durata della transizione sotto i 300 ms ed eviti di applicarla a sottoalberi estremamente complessi.

Verifichi la disponibilità dell'API prima di utilizzarla: if (!document.startViewTransition) { updateDom(); return; }. Il fallback aggiorna normalmente il DOM senza animazione. View Transitions è un miglioramento progressivo: l'applicazione funziona anche senza, ma l'esperienza migliora nei browser che le supportano.

Che cosa consente view-transition-name su un elemento durante una View Transition?

La View Transitions API consente animazioni di dissolvenza incrociata e trasformazione tra stati del DOM o navigazioni di pagina con una quantità minima di codice. Gli elementi con una transizione nominata si trasformano automaticamente; le animazioni personalizzate dei pseudo-elementi sostituiscono la dissolvenza incrociata predefinita. Rispetti prefers-reduced-motion e utilizzi il miglioramento progressivo per i browser non supportati.