View Transitions API: esempi dal vivo per SPA e multipagina | We.Inc
Esempi funzionanti della View Transitions API: startViewTransition in una lista da mescolare, elementi con nome che si trasformano, @view-transition tra pagine, tipi, React e supporto.
Esempi della View Transitions API
La View Transitions API anima il passaggio tra due stati di una pagina. In una single-page app, racchiudi l'aggiornamento del DOM in document.startViewTransition(() => update()). Tra pagine della stessa origine, aggiungi @view-transition { navigation: auto; } a entrambe le pagine. Dai a un elemento un view-transition-name univoco e il browser lo trasforma dalla vecchia posizione alla nuova.
Due tipi di view transition
Stesso documento (SPA)
Tra documenti (MPA)
Come la avvii
document.startViewTransition()
@view-transition { navigation: auto; } su entrambe le pagine
Chrome ed Edge
111 e successivi
126 e successivi
Safari
18 e successivi
18.2 e successivi
Firefox
144 e successivi
Non ancora supportato
Baseline
Disponibile da poco (ottobre 2025)
Non Baseline
La maggior parte delle spiegazioni sulle view transition descrive l'albero degli pseudo-elementi e si ferma lì. Questa pagina parte da una demo funzionante nel tuo browser: mescola una griglia, apri una scheda in una vista di dettaglio e guarda muoversi gli elementi con nome. Poi ti dà il codice per ogni pattern, la configurazione tra pagine e i fallback per i browser senza supporto.
Premi Mescola per riordinare la griglia. Ogni riquadro ha il proprio view-transition-name, quindi ognuno scivola nella sua nuova posizione.
Clicca un riquadro per aprirlo. Il blocco di colore e il titolo si trasformano nella vista di dettaglio perché condividono i nomi con essa.
Se il tuo browser non ha l'API, la demo si aggiorna comunque all'istante e te lo segnala.
Copia gli snippet qui sotto per JavaScript puro, React e siti multipagina.
Ogni view-transition-name nella pagina deve essere univoco al momento dello snapshot. Un duplicato fa rifiutare la promise ready e la transizione viene saltata.
Usa view-transition-name: match-element in una transizione nello stesso documento per dare automaticamente un nome a ogni elemento di una lista.
Recupera i dati prima di chiamare startViewTransition. Il rendering è congelato mentre gira la callback di aggiornamento, quindi una callback lenta sembra un blocco.
Controlla che document.startViewTransition esista prima di chiamarlo, e se manca esegui semplicemente l'aggiornamento.
Riduci le animazioni dentro una query prefers-reduced-motion: reduce; il cambio di stato avviene comunque.
Domande frequenti
Cosa fa document.startViewTransition?
Fa uno snapshot della pagina attuale, esegue la tua callback di aggiornamento, poi anima dal vecchio snapshot al nuovo stato reale. Restituisce un oggetto ViewTransition con le promise ready, finished e updateCallbackDone e un metodo skipTransition().
Come aggiungo le view transition tra pagine?
Metti @view-transition { navigation: auto; } nel CSS sia della pagina che lasci sia di quella su cui arrivi. Le pagine devono avere la stessa origine, e per impostazione predefinita ottieni una dissolvenza incrociata. Dai agli elementi corrispondenti lo stesso view-transition-name su entrambe le pagine per trasformarli.
Le view transition funzionano in Firefox?
Le transizioni nello stesso documento funzionano da Firefox 144. Le transizioni tra documenti non erano supportate in Firefox al momento della stesura, quindi su quei browser la navigazione avviene semplicemente senza animazione.
Come uso le view transition in React?
Chiama document.startViewTransition e aggiorna lo stato dentro flushSync di react-dom, così React scrive il nuovo DOM in modo sincrono prima che il browser faccia il nuovo snapshot.
Come personalizzo l'animazione?
Applica stili agli pseudo-elementi. ::view-transition-old(name) è lo snapshot in uscita e ::view-transition-new(name) quello in entrata, mentre ::view-transition-group(name) controlla dimensione e posizione. Usa root come nome per l'intera pagina.
Cosa succede durante una transizione
Il browser cattura lo stato attuale come immagini, una per la pagina e una per ogni elemento con nome. Esegue il tuo aggiornamento mentre il rendering è in pausa, poi cattura il nuovo stato.
Costruisce un albero di pseudo-elementi sopra la pagina: un gruppo per ogni nome, che contiene un'immagine vecchia e una nuova. Per impostazione predefinita il gruppo anima dimensione e posizione mentre le due immagini si dissolvono l'una nell'altra, ed è questo che crea la trasformazione.
Dare bene i nomi agli elementi
Un nome collega un elemento del vecchio stato a uno del nuovo stato. La foto di un prodotto in una lista e la foto grande nella sua pagina di dettaglio possono condividere un nome come product-42, e il browser anima l'una nell'altra.
Imposta il nome solo dove serve. Dare un nome a un elemento che non cambia costa comunque uno snapshot separato.
Tipi per direzioni diverse
startViewTransition accetta anche un oggetto options con una funzione update e un array types. Un tipo come forwards o backwards può poi essere intercettato nel CSS con il selettore :active-view-transition-type(), così tornando indietro lo scorrimento va nell'altro verso.
Per le navigazioni tra pagine, il descrittore types dentro @view-transition imposta i tipi allo stesso modo.
Transizioni nello stesso documento
startViewTransition con rilevamento della funzionalità
I browser senza l'API eseguono subito l'aggiornamento, quindi non si rompe nulla.
Trasformare una miniatura in un'immagine hero
Solo un elemento alla volta può avere il nome, quindi impostalo sulla miniatura cliccata appena prima della transizione.
React
startViewTransition con flushSync
flushSync fa sì che React applichi il nuovo DOM dentro la callback.
Transizioni tra documenti
Scorrimento tra le pagine di un sito multipagina
Includilo nel foglio di stile di ogni pagina che deve partecipare. Solo stessa origine.
Riferimento dell'API
Le parti della View Transitions API
Nome
Tipo
Cosa fa
document.startViewTransition(update)
Metodo
Avvia una transizione nello stesso documento e restituisce un ViewTransition
ViewTransition.ready
Promise
Si risolve quando gli pseudo-elementi esistono e l'animazione sta per iniziare
ViewTransition.finished
Promise
Si risolve quando l'animazione finisce e il nuovo stato è attivo
ViewTransition.updateCallbackDone
Promise
Si risolve quando la tua callback di aggiornamento è terminata
ViewTransition.skipTransition()
Metodo
Salta l'animazione; l'aggiornamento viene comunque eseguito
Proprietà CSS
Dà a un elemento il proprio snapshot da trasformare
@view-transition
At-rule CSS
Abilita una pagina alle transizioni tra documenti
::view-transition-old() / -new()
Pseudo-elementi
Gli snapshot in uscita e in entrata
::view-transition-group()
Pseudo-elemento
Anima dimensione e posizione per un nome
pageswap / pagereveal
Eventi
Permettono a uno script di regolare una transizione tra documenti
Porto
Prato
Brace
Crepuscolo
Ardesia
Corallo
Il movimento ridotto è attivo, quindi il cambio è stato istantaneo.
Il tuo browser non supporta le view transition, quindi il cambio è stato istantaneo.
Demo dal vivo
Mescola la griglia o apri una scheda. Ogni riquadro ha il proprio view-transition-name, quindi il browser lo anima verso la sua nuova posizione.
Mescola
Torna alla griglia
Il blocco di colore e il titolo si sono trasformati dalla griglia perché qui mantengono gli stessi nomi.