View Transitions API: Jämna sida och tillståndsändringar i webbläsaren
Vad View Transitions API gör, hur övergångar mellan samma dokument och över dokument fungerar, hur man utformar dem med CSS och hur man använder dem på ett ansvarsfullt sätt.
Core Takeaway
View Transitions API låter webbläsaren animera mellan två tillstånd på en sida. Anrop document.startViewTransition() med en funktion som uppdaterar DOM, och webbläsaren tar ögonblicksbilder av de gamla och nya vyerna och animerar mellan dem, som du kan styla med ::view-transition pseudo-element. Det fungerar i appar på en sida och, i stödjande webbläsare, över sidnavigering.
Hur det fungerar
MDN beskriver document.startViewTransition() som att starta en övergång av samma dokumentvy, typiskt i appar på en sida. Webbläsaren fångar den aktuella vyn, kör din uppdatering, fångar den nya vyn och animerar mellan dem. Som standard är det en cross-fade; CSS låter dig ändra det.
Samma dokument och korsdokument
Samma dokumentövergångar körs på en sida, som i SPA, och Chrome har stödt dem sedan Chrome 111. Övergångar mellan dokument animeras mellan separata sidor på flersidiga webbplatser, vilket MDN noterar historiskt sett hade varit omöjligt; de använder evenemangen pageswap och pagereveal och en opt-in i CSS. Webbläsarstödet skiljer sig mellan de två, så kontrollera aktuella kompatibilitetstabeller.
Styling av övergången
Mest anpassning är vanlig CSS:
- Ge ett element ett view-transition-namn för att animera det separat från resten av sidan, till exempel en miniatyr som växer till en hjältebild.
- Rikta in ::view-transition-old() och ::view-transition-new() för att anpassa animationen.
- Håll varaktigheterna korta och rörelsen meningsfull.
- Slå in anpassade animeringar i prefers-reduced-motion checks.
Progressiv förbättring
Kontrollera alltid supporten innan du anropar API:t och uppdatera DOM direkt om den saknas. Sidan ska fungera identiskt utan animering. Undvik långa övergångar på navigering, vilket gör att hela sidan känns långsammare.
Produktionsimplementeringsutdrag
// 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;
}Nyckel Principles att komma ihåg
- startViewTransition() tar ögonblicksbilder av gamla och nya vyer och animerar mellan dem
- Det finns varianter av samma dokument (SPA) och tvärdokument (flersidiga).
- Stil med view-transition-name och ::view-transition pseudo-element
- Kontrollera supporten och fall tillbaka till en omedelbar uppdatering
- Håll övergångarna korta och respektera minskad rörelse
Vanliga frågor
Källor
- View Transition API — MDN Web Docs
- Smooth transitions with the View Transition API — Chrome för utvecklare