Interfejs API przejść widoków: płynne zmiany strony i stanu w przeglądarce
Co robi API View Transitions, jak działają przejścia tego samego dokumentu i między dokumentami, jak je stylizować za pomocą CSS i jak z nich korzystać w sposób odpowiedzialny.
Rdzeń na wynos
Interfejs API View Transitions umożliwia przeglądarce animację między dwoma stanami strony. Wywołaj document.startViewTransition() z funkcją aktualizującą DOM, a przeglądarka wykona migawki starego i nowego widoku oraz animacje pomiędzy nimi, które możesz stylizować za pomocą pseudoelementów ::view-transition. Działa w aplikacjach jednostronicowych oraz, w obsługiwanych przeglądarkach, podczas nawigacji na stronach.
Jak to działa
MDN opisuje metodę document.startViewTransition() jako rozpoczynającą przejście widoku tego samego dokumentu, typowe w aplikacjach jednostronicowych. Przeglądarka przechwytuje bieżący widok, uruchamia aktualizację, przechwytuje nowy widok i animuje pomiędzy nimi. Domyślnie jest to zanikanie; CSS pozwala to zmienić.
Ten sam dokument i dokument krzyżowy
Przejścia między dokumentami odbywają się na jednej stronie, tak jak w SPA, a Chrome obsługuje je od wersji Chrome 111. Przejścia między dokumentami są animowane pomiędzy oddzielnymi stronami w witrynach wielostronicowych, co według MDN było historycznie niemożliwe; korzystają ze zdarzeń pagewap i pagereveal oraz opcji opt-in w CSS. Obsługa przeglądarek różni się w obu przypadkach, dlatego sprawdź aktualne tabele zgodności.
Stylizacja przejścia
Większość dostosowań to zwykłe CSS:
- Nadaj elementowi nazwę przejścia widoku, aby animować go oddzielnie od reszty strony, na przykład miniaturę rozwijającą się w obraz główny.
- Target ::view-transition-old() i ::view-transition-new(), aby dostosować animację.
- Staraj się, aby czas trwania był krótki, a ruch znaczący.
- Zawijaj niestandardowe animacje w kontrolach preferencji przy zmniejszonym ruchu.
Stopniowe ulepszanie
Zawsze sprawdź wsparcie przed wywołaniem API i zaktualizuj bezpośrednio model DOM, jeśli go brakuje. Strona powinna działać identycznie bez animacji. Unikaj długich przejść w nawigacji, które spowalniają całą witrynę.
Fragment wdrożenia produkcyjnego
// 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;
}Klucz Principles do zapamiętania
- startViewTransition() tworzy migawki starych i nowych widoków oraz animuje pomiędzy nimi
- Istnieją warianty tego samego dokumentu (SPA) i wielu dokumentów (wielostronicowe).
- Styl z pseudoelementami nazwa-przejścia widoku i ::przejście widoku
- Sprawdź wsparcie i wróć do natychmiastowej aktualizacji
- Staraj się, aby przejścia były krótkie i respektuj ograniczony ruch
Często zadawane pytania
Źródła
- View Transition API — Dokumenty internetowe MDN
- Smooth transitions with the View Transition API — Chrome dla programistów