API-ul View Transitions: Smooth Page and State Changes in Browser
Ce face API-ul View Transitions, cum funcționează tranzițiile între același document și între documente, cum să le stilizezi cu CSS și cum să le folosești în mod responsabil.
Core Takeaway
API-ul View Transitions permite browserului să se anime între două stări ale unei pagini. Apelați document.startViewTransition() cu o funcție care actualizează DOM-ul, iar browserul face instantanee vizualizările vechi și noi și le animă, pe care le puteți stila cu pseudo-elemente ::view-transition. Funcționează în aplicațiile cu o singură pagină și, în browserele compatibile, în navigarea paginilor.
Cum funcționează
MDN descrie document.startViewTransition() ca pornind o tranziție de vizualizare a aceluiași document, tipic în aplicațiile cu o singură pagină. Browserul captează vizualizarea curentă, rulează actualizarea, captează noua vizualizare și se anime între ele. În mod implicit, acesta este un cross-fade; CSS vă permite să îl schimbați.
Același document și încrucișat
Tranzițiile pentru același document se execută într-o singură pagină, ca în SPA-uri, iar Chrome le-a acceptat începând cu Chrome 111. Tranzițiile între documente sunt animate între pagini separate în site-uri cu mai multe pagini, ceea ce MDN notează că istoricul a fost imposibil; folosesc evenimentele de schimbare a paginilor și de afișare a paginilor și o înscriere în CSS. Suportul pentru browser diferă între cele două, așa că verificați tabelele de compatibilitate actuale.
Stilizarea tranziției
Majoritatea personalizării sunt simple CSS:
- Dați unui element un nume de tranziție de vizualizare pentru a-l anima separat de restul paginii, cum ar fi o miniatură care crește într-o imagine erou.
- Vizați ::view-transition-old() și ::view-transition-new() pentru a personaliza animația.
- Păstrați duratele scurte și mișcarea semnificativă.
- Încheiați animațiile personalizate în verificări cu mișcare redusă.
Îmbunătățire progresivă
Verificați întotdeauna asistența înainte de a apela API și actualizați direct DOM-ul dacă lipsește. Pagina ar trebui să funcționeze identic fără animație. Evitați tranzițiile lungi la navigare, care fac ca întregul site să se simtă mai lent.
Fragment de implementare a producției
// 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;
}Cheie Principles de reținut
- startViewTransition() instantanee vizualizările vechi și noi și animează între ele
- Există variante cu același document (SPA) și încrucișat (cu mai multe pagini).
- Stil cu pseudo-elemente view-transition-name și ::view-transition
- Verificați asistența și reveniți la o actualizare instantanee
- Păstrați tranzițiile scurte și respectați mișcarea redusă
Întrebări frecvente
Surse
- View Transition API — MDN Web Docs
- Smooth transitions with the View Transition API — Chrome pentru dezvoltatori