View Transitions API: Glat side- og tilstandsændringer i browseren
Hvad View Transitions API gør, hvordan overgange mellem samme dokumenter og på tværs af dokumenter fungerer, hvordan man style dem med CSS, og hvordan man bruger dem ansvarligt.
Core Takeaway
View Transitions API lader browseren animere mellem to tilstande på en side. Kald document.startViewTransition() med en funktion, der opdaterer DOM, og browseren tager de gamle og nye visninger og animerer mellem dem, som du kan style med ::view-transition pseudo-elementer. Det fungerer i enkeltside-apps og, i understøttende browsere, på tværs af sidenavigationer.
Hvordan det virker
MDN beskriver document.startViewTransition() som en start af en overgang til visning af samme dokument, typisk i apps på én side. Browseren fanger den aktuelle visning, kører din opdatering, fanger den nye visning og animerer mellem dem. Som standard er det en cross-fade; CSS lader dig ændre det.
Samme dokument og krydsdokument
Samme dokumentovergange kører på én side, som i SPA'er, og Chrome har understøttet dem siden Chrome 111. Overgange på tværs af dokumenter animerer mellem separate sider på flere siders websteder, hvilket MDN bemærker historisk set havde været umuligt; de bruger pageswap- og pagereveal-begivenhederne og en opt-in i CSS. Browserunderstøttelse er forskellig mellem de to, så tjek de aktuelle kompatibilitetstabeller.
Style overgangen
Mest tilpasning er almindelig CSS:
- Giv et element et view-transition-navn for at animere det adskilt fra resten af siden, såsom et miniaturebillede, der vokser til et heltebillede.
- Målret ::view-transition-old() og ::view-transition-new() for at tilpasse animationen.
- Hold varighederne korte og bevægelsen meningsfuld.
- Pak tilpassede animationer ind i checks med foretrækker-reduceret bevægelse.
Progressiv forbedring
Tjek altid support, før du kalder API'en, og opdater DOM direkte, hvis den mangler. Siden skal fungere identisk uden animationen. Undgå lange overgange på navigation, som får hele siden til at føles langsommere.
Snippet til produktionsimplementering
// 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;
}Tast Principles for at huske
- startViewTransition() tager gamle og nye visninger og animerer mellem dem
- Der findes varianter af samme dokument (SPA) og tværdokument (flersidet).
- Style med view-transition-name og ::view-transition pseudo-elementer
- Tjek support og vend tilbage til en øjeblikkelig opdatering
- Hold overgange korte og respekter reduceret bevægelse
Ofte stillede spørgsmål
Kilder
- View Transition API — MDN Web Docs
- Smooth transitions with the View Transition API — Chrome for udviklere