L'API View Transitions: modifiche fluide alla pagina e allo stato nel browser
Cosa fa l'API View Transitions, come funzionano le transizioni tra documenti stessi e tra documenti, come applicarne lo stile con CSS e come utilizzarle in modo responsabile.
Punto chiave
L'API View Transitions consente al browser di animarsi tra due stati di una pagina. Chiama document.startViewTransition() con una funzione che aggiorna il DOM e il browser scatta istantanee delle viste vecchie e nuove e le anima tra loro, a cui puoi modellare con pseudo-elementi ::view-transition. Funziona all'interno di app a pagina singola e, nei browser che supportano, attraverso la navigazione delle pagine.
Come funziona
MDN descrive document.startViewTransition() come l'avvio di una transizione di visualizzazione dello stesso documento, tipica nelle app a pagina singola. Il browser acquisisce la vista corrente, esegue l'aggiornamento, acquisisce la nuova vista e si anima tra di loro. Per impostazione predefinita si tratta di una dissolvenza incrociata; CSS ti consente di modificarlo.
Stesso documento e documenti incrociati
Le transizioni dello stesso documento vengono eseguite all'interno di una pagina, come negli SPA, e Chrome le supporta sin da Chrome 111. Le transizioni tra documenti si animano tra pagine separate in siti multipagina, cosa che secondo MDN era storicamente impossibile; utilizzano gli eventi pagewap e pagereveal e un opt-in in CSS. Il supporto del browser è diverso tra i due, quindi controlla le tabelle di compatibilità attuali.
Modellare la transizione
La maggior parte delle personalizzazioni sono semplici CSS:
- Assegna a un elemento un nome di transizione di visualizzazione per animarlo separatamente dal resto della pagina, ad esempio una miniatura che si trasforma in un'immagine hero.
- Scegli ::view-transition-old() e ::view-transition-new() per personalizzare l'animazione.
- Mantieni la durata breve e il movimento significativo.
- Avvolgi le animazioni personalizzate in controlli a movimento ridotto.
Miglioramento progressivo
Controlla sempre il supporto prima di chiamare l'API e aggiorna direttamente il DOM se manca. La pagina dovrebbe funzionare in modo identico senza l'animazione. Evita transizioni lunghe durante la navigazione, che rendono l'intero sito più lento.
Estratto di implementazione in produzione
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Principi chiave da ricordare
- startViewTransition() crea istantanee delle viste vecchie e nuove e le anima
- Esistono varianti dello stesso documento (SPA) e di documenti incrociati (più pagine).
- Stile con nome-transizione-di-vista e pseudo-elementi ::transizione-di-vista
- Controlla il supporto e torna a un aggiornamento istantaneo
- Mantieni le transizioni brevi e rispetta i movimenti ridotti
Domande frequenti
Fonti
- View Transition API — MDN Documenti Web
- Smooth transitions with the View Transition API — Chrome per sviluppatori