View Transitions API: Glatt side- og tilstandsendringer i nettleseren
Hva View Transitions API gjør, hvordan overganger fra samme dokument og på tvers av dokumenter fungerer, hvordan du stiler dem med CSS, og hvordan du bruker dem på en ansvarlig måte.
Kjerne takeaway
View Transitions API lar nettleseren animere mellom to tilstander på en side. Ring document.startViewTransition() med en funksjon som oppdaterer DOM, og nettleseren tar øyeblikksbilder av de gamle og nye visningene og animerer mellom dem, som du kan style med ::view-transition pseudo-elementer. Den fungerer i enkeltside-apper og, i støttende nettlesere, på tvers av sidenavigasjoner.
Hvordan det fungerer
MDN beskriver document.startViewTransition() som å starte en visningsovergang for samme dokument, typisk i enkeltsideapper. Nettleseren fanger opp gjeldende visning, kjører oppdateringen din, fanger den nye visningen og animerer mellom dem. Som standard er det en cross-fade; CSS lar deg endre den.
Samme dokument og kryssdokument
Samme dokumentoverganger kjører på én side, som i SPA-er, og Chrome har støttet dem siden Chrome 111. Overganger på tvers av dokumenter animerer mellom separate sider på flere siders nettsteder, noe MDN bemerker at historisk sett hadde vært umulig; de bruker pageswap og pagereveal-hendelser og en opt-in i CSS. Nettleserstøtten er forskjellig mellom de to, så sjekk gjeldende kompatibilitetstabeller.
Styler overgangen
Mest tilpasning er vanlig CSS:
- Gi et element et view-transition-navn for å animere det separat fra resten av siden, for eksempel et miniatyrbilde som vokser til et heltebilde.
- Mål ::view-transition-old() og ::view-transition-new() for å tilpasse animasjonen.
- Hold varighetene korte og bevegelsen meningsfull.
- Pakk inn tilpassede animasjoner i foretrekker-redusert-bevegelse-sjekker.
Progressiv forbedring
Sjekk alltid støtten før du kaller APIen, og oppdater DOM direkte hvis den mangler. Siden skal fungere identisk uten animasjonen. Unngå lange overganger på navigering, som gjør at hele siden føles tregere.
Snippet for produksjonsimplementering
// 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 å huske
- startViewTransition() tar øyeblikksbilder av gamle og nye visninger og animerer mellom dem
- Det finnes varianter av samme dokument (SPA) og på tvers av dokumenter (flersider).
- Stil med view-transition-name og ::view-transition pseudo-elementer
- Sjekk støtten og fall tilbake til en umiddelbar oppdatering
- Hold overganger korte og respekter redusert bevegelse
Ofte stilte spørsmål
Kilder
- View Transition API — MDN Web Docs
- Smooth transitions with the View Transition API — Chrome for utviklere