View Transitions API: Vyhladenie zmien stránky a stavu v prehliadači
Čo robí View Transitions API, ako fungujú prechody medzi rovnakými dokumentmi a medzi dokumentmi, ako ich štýlovať pomocou CSS a ako ich používať zodpovedne.
Core Takeaway
View Transitions API umožňuje prehliadaču animovať medzi dvoma stavmi stránky. Zavolajte document.startViewTransition() s funkciou, ktorá aktualizuje DOM, a prehliadač vytvorí snímky starého a nového zobrazenia a animuje medzi nimi, ktoré môžete upraviť pomocou pseudoprvkov ::view-transition. Funguje v rámci jednostránkových aplikácií a v podporných prehliadačoch aj naprieč stránkami.
Ako to funguje
MDN popisuje document.startViewTransition() ako spustenie prechodu zobrazenia rovnakého dokumentu, ktorý je typický pre jednostránkové aplikácie. Prehliadač zachytí aktuálne zobrazenie, spustí aktualizáciu, zachytí nové zobrazenie a medzi nimi animuje. V predvolenom nastavení ide o prelínanie; CSS vám to umožňuje zmeniť.
Rovnaký dokument a krížový dokument
Rovnaké prechody medzi dokumentmi prebiehajú na jednej stránke ako v SPA a Chrome ich podporuje od Chrome 111. Prechody medzi dokumentmi sa animujú medzi samostatnými stránkami na viacstránkových stránkach, čo bolo podľa MDN historicky nemožné; používajú udalosti pagewap a pagereveal a prihlásenie do CSS. Podpora prehliadačov sa medzi nimi líši, preto skontrolujte aktuálne tabuľky kompatibility.
Štylizácia prechodu
Väčšina prispôsobení je obyčajná CSS:
- Priraďte prvku názov view-transition-name, aby ste ho animovali oddelene od zvyšku stránky, ako je napríklad miniatúra, ktorá prerastie do obrázka hrdinu.
- Zacieľte na ::view-transition-old() a ::view-transition-new() na prispôsobenie animácie.
- Udržujte krátke trvanie a pohyb zmysluplný.
- Zabaľte vlastné animácie do kontroly preferencií so zníženým pohybom.
Progresívne vylepšenie
Pred volaním rozhrania API vždy skontrolujte podporu a ak chýba DOM, priamo aktualizujte. Stránka by mala fungovať identicky aj bez animácie. Vyhnite sa dlhým prechodom pri navigácii, ktoré spôsobujú, že celý web je pomalší.
Snippet implementácie výroby
// 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;
}Kľúč Principle na zapamätanie
- startViewTransition() vytvára snímky starých a nových pohľadov a animuje medzi nimi
- Existujú varianty rovnakého dokumentu (SPA) a krížového dokumentu (viacstranové).
- Štýl s názvom view-transition-name a ::view-transition pseudoprvkami
- Skontrolujte podporu a vráťte sa k okamžitej aktualizácii
- Udržujte prechody krátke a rešpektujte znížený pohyb
Často kladené otázky
Zdroje
- View Transition API — Webové dokumenty MDN
- Smooth transitions with the View Transition API — Chrome pre vývojárov