De View Transitions API: vloeiende pagina- en statuswijzigingen in de browser
Wat de View Transitions API doet, hoe overgangen tussen hetzelfde document en tussen verschillende documenten werken, hoe u ze kunt opmaken met CSS en hoe u ze op verantwoorde wijze kunt gebruiken.
Kern afhaalmaaltijd
Met de View Transitions API kan de browser tussen twee statussen van een pagina animeren. Roep document.startViewTransition() aan met een functie die de DOM bijwerkt, en de browser maakt een momentopname van de oude en nieuwe weergaven en animeert ertussen, die u kunt opmaken met ::view-transition pseudo-elementen. Het werkt binnen apps met één pagina en, bij ondersteunende browsers, over paginanavigatie heen.
Hoe het werkt
MDN beschrijft document.startViewTransition() als het starten van een weergaveovergang van hetzelfde document, typisch in apps met één pagina. De browser legt de huidige weergave vast, voert uw update uit, legt de nieuwe weergave vast en animeert ertussen. Standaard is dat een cross-fade; Met CSS kunt u dit wijzigen.
Hetzelfde document en meerdere documenten
Overgangen van dezelfde documenten worden binnen één pagina uitgevoerd, zoals in SPA's, en Chrome ondersteunt ze sinds Chrome 111. Overgangen tussen documenten worden geanimeerd tussen afzonderlijke pagina's op sites met meerdere pagina's, wat volgens MDN historisch gezien onmogelijk was; ze gebruiken de pagewap- en pagereveal-gebeurtenissen en een opt-in in CSS. Browserondersteuning verschilt tussen de twee, dus controleer de huidige compatibiliteitstabellen.
Het stylen van de overgang
De meeste aanpassingen zijn eenvoudig CSS:
- Geef een element een weergave-overgangsnaam om het afzonderlijk van de rest van de pagina te animeren, zoals een miniatuur die uitgroeit tot een hero-afbeelding.
- Target ::view-transition-old() en ::view-transition-new() om de animatie aan te passen.
- Houd de duur kort en de beweging betekenisvol.
- Verpak aangepaste animaties in controles met voorkeur voor verminderde beweging.
Progressieve verbetering
Controleer altijd de ondersteuning voordat u de API aanroept en update de DOM direct als deze ontbreekt. De pagina zou identiek moeten werken zonder de animatie. Vermijd lange overgangen in de navigatie, waardoor de hele site langzamer aanvoelt.
Productie-implementatiefragment
// 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;
}Toets Principles in om te onthouden
- startViewTransition() maakt een momentopname van oude en nieuwe weergaven en animeert ertussen
- Er bestaan varianten voor hetzelfde document (SPA) en varianten voor meerdere documenten (meerdere pagina's).
- Stijl met view-transition-name en ::view-transition pseudo-elementen
- Controleer de ondersteuning en val terug op een onmiddellijke update
- Houd overgangen kort en respecteer verminderde beweging
Veelgestelde vragen
Bronnen
- View Transition API — MDN Webdocumenten
- Smooth transitions with the View Transition API — Chrome voor ontwikkelaars