A View Transitions API: Sima oldal- és állapotváltozások a böngészőben
Mit csinál a View Transitions API, hogyan működnek az ugyanazon dokumentumon és a dokumentumokon átívelő átmenetek, hogyan alakítsuk ki őket a CSS segítségével, és hogyan használjuk őket felelősségteljesen.
Core Takeaway
A View Transitions API lehetővé teszi, hogy a böngésző animáljon az oldal két állapota között. Hívja meg a document.startViewTransition() függvényt, amely frissíti a DOM-ot, és a böngésző pillanatfelvételeket készít a régi és új nézetekről, és animál közöttük, amit ::view-transition pszeudoelemekkel lehet stílusozni. Működik az egyoldalas alkalmazásokban, és a támogató böngészőkben az oldalak közötti navigációban.
Hogyan működik
A MDN leírása szerint a document.startViewTransition() ugyanazon dokumentumnézet-átmenet elindítása, ami jellemző az egyoldalas alkalmazásokban. A böngésző rögzíti az aktuális nézetet, futtatja a frissítést, rögzíti az új nézetet, és animál közöttük. Alapértelmezés szerint ez egy keresztfade; A CSS segítségével megváltoztathatja.
Azonos-dokumentum és keresztdokumentum
Az azonos dokumentum átmenetek egy oldalon belül futnak, mint az SPA-kban, és a Chrome támogatja őket a Chrome 111 óta. A többoldalas webhelyeken a dokumentumok közötti átmenetek animálnak a különálló oldalak között, ami a MDN szerint korábban lehetetlen volt; az oldalcsere és a lapfeltáró eseményeket, valamint a CSS feliratkozást használják. A böngésző támogatása eltér a kettő között, ezért ellenőrizze az aktuális kompatibilitási táblázatokat.
Az átmenet stílusa
A legtöbb testreszabás egyszerű CSS:
- Adjon egy elemnek view-transition-name-et, hogy külön animálja az oldal többi részétől, például egy hősképpé nőtt bélyegképnek.
- Célozza meg a ::view-transition-old() és ::view-transition-new() elemeket az animáció testreszabásához.
- Legyen rövid az időtartam és a mozgás értelmes.
- Az egyéni animációkat becsomagolja preferált-csökkentett mozgásellenőrzésekbe.
Progresszív fokozás
Mindig ellenőrizze a támogatást, mielőtt hívná az API-t, és közvetlenül frissítse a DOM-ot, ha hiányzik. Az oldalnak ugyanúgy kell működnie animáció nélkül. Kerülje el a hosszú átmeneteket a navigáció során, amelyek miatt az egész webhely lassabbnak tűnik.
Gyártási megvalósítási részlet
// 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;
}Kulcs Principle, amit meg kell jegyezni
- A startViewTransition() pillanatképeket készít a régi és az új nézetekről, és animál közöttük
- Léteznek azonos dokumentum (SPA) és dokumentumok közötti (többoldalas) változatok
- Stílus view-transition-name és ::view-transition pszeudoelemekkel
- Ellenőrizze a támogatást, és térjen vissza az azonnali frissítéshez
- Tartsa röviden az átmeneteket, és tartsa tiszteletben a csökkentett mozgást
Gyakran Ismételt Kérdések
Források
- View Transition API — MDN webdokumentumok
- Smooth transitions with the View Transition API — Chrome fejlesztőknek