View Transitions API: Vyhladit změny stránky a stavu v prohlížeči
Co dělá View Transitions API, jak fungují přechody mezi stejnými dokumenty a mezi dokumenty, jak je stylovat pomocí CSS a jak je zodpovědně používat.
Core Takeaway
View Transitions API umožňuje prohlížeči animovat mezi dvěma stavy stránky. Zavolejte document.startViewTransition() s funkcí, která aktualizuje DOM, a prohlížeč pořídí snímky starých a nových pohledů a animuje mezi nimi, což můžete upravit pomocí pseudoprvků ::view-transition. Funguje v rámci jednostránkových aplikací a v podporovaných prohlížečích i napříč stránkami.
Jak to funguje
MDN popisuje document.startViewTransition() jako spuštění přechodu zobrazení stejného dokumentu, typického v jednostránkových aplikacích. Prohlížeč zachytí aktuální zobrazení, spustí aktualizaci, zachytí nové zobrazení a mezi nimi provede animaci. Ve výchozím nastavení je to cross-fade; CSS vám to umožní změnit.
Stejný dokument a křížový dokument
Přechody stejných dokumentů probíhají uvnitř jedné stránky jako v SPA a Chrome je podporuje od Chrome 111. Přechody mezi dokumenty se oživují mezi samostatnými stránkami na vícestránkových webech, což bylo podle MDN historicky nemožné; používají události pagewap a pagereveal a opt-in v CSS. Podpora prohlížeče se mezi těmito dvěma liší, proto zkontrolujte aktuální tabulky kompatibility.
Styling přechodu
Většina přizpůsobení je prosté CSS:
- Přiřaďte prvku název zobrazení-přechodu, chcete-li jej animovat odděleně od zbytku stránky, jako je například miniatura přerůstající v obrázek hrdiny.
- Zacilte na ::view-transition-old() a ::view-transition-new() pro přizpůsobení animace.
- Udržujte krátké doby trvání a pohyb smysluplný.
- Zabalte vlastní animace do kontrol s omezením pohybu.
Progresivní vylepšení
Před voláním rozhraní API vždy zkontrolujte podporu, a pokud chybí DOM, přímo aktualizujte. Stránka by měla fungovat stejně bez animace. Vyhněte se dlouhým přechodům na navigaci, které zpomalují celý web.
Fragment implementace 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;
}Klíč Principle k zapamatování
- startViewTransition() pořídí snímky starých a nových pohledů a animuje mezi nimi
- Existují varianty stejného dokumentu (SPA) a křížového dokumentu (více stránek).
- Styl s view-transition-name a ::view-transition pseudo-prvky
- Zkontrolujte podporu a vraťte se k okamžité aktualizaci
- Udržujte přechody krátké a respektujte snížený pohyb
Často kladené otázky
Zdroje
- View Transition API — Webové dokumenty MDN
- Smooth transitions with the View Transition API — Chrome pro vývojáře