View Transitions API

View Transitions API (Chrome 111+) umożliwia płynne, animowane przejścia między różnymi stanami strony lub podczas nawigacji między stronami. Przechwytuje zrzuty ekranu przed i po zmianie, a następnie płynnie przechodzi między nimi za pomocą animacji CSS — umożliwiając uzyskanie w sieci przejść znanych z aplikacji.

Przejście w obrębie tej samej strony można uruchomić, owijając aktualizację DOM w document.startViewTransition(() => updateDom()). Przeglądarka przechwytuje stary stan, wykonuje aktualizację, przechwytuje nowy stan i automatycznie stosuje między nimi efekt przenikania.

Bez żadnego CSS funkcja View Transitions wykonuje proste przenikanie między starym a nowym stanem strony. Ta jedna linia JavaScriptu dodaje dopracowane przejście, które wcześniej wymagało złożonego zarządzania animacjami CSS albo użycia dedykowanej biblioteki animacji.

API udostępnia cztery pseudoelementy: ::view-transition (nakładka główna), ::view-transition-old(root) (zrzut ekranu starej strony), ::view-transition-new(root) (zrzut ekranu nowej strony) oraz ::view-transition-image-pair(root). Można je dostosowywać za pomocą animacji CSS.

Przypisz view-transition-name: hero-image elementowi, który pozostaje obecny podczas przejścia. API automatycznie przekształca ten element z jego starego położenia i rozmiaru do nowego położenia i rozmiaru, tworząc płynną animację na poziomie elementu.

Domyślne przenikanie można zastąpić własnymi klatkami kluczowymi dla pseudoelementów: przy nawigacji do przodu element powinien wsunąć się z prawej, a przy powrocie — z lewej. Kieruj animacje na ::view-transition-new(root) i ::view-transition-old(root) za pomocą @keyframes.

Przejścia między dokumentami View Transitions (Chrome 126+) animują przejścia między pełnymi załadowaniami stron w aplikacjach wielostronicowych. Dodanie @view-transition { navigation: auto; } do CSS sprawia, że przeglądarka automatycznie obsługuje przejście między stronami HTML — JavaScript nie jest potrzebny.

Użytkownicy z zaburzeniami przedsionkowymi nie powinni doświadczać przejść z dużą ilością ruchu. Animacje przejść należy opakować w @media (prefers-reduced-motion: no-preference), aby wyłączyć własne animacje u osób preferujących ograniczenie ruchu, zachowując jednocześnie funkcjonalną aktualizację DOM.

React Router v6.4+, Vue Router i Astro obsługują View Transitions. Frameworki automatycznie owijają zmiany tras w startViewTransition. Style przejść dla poszczególnych tras można konfigurować za pomocą view-transition-name na trwałych elementach, takich jak nawigacja i powłoki układu.

View Transitions przechwytuje zrzuty ekranu strony, co może być kosztowne w przypadku złożonych układów. Duże strony z wieloma warstwami kompozytowalnymi mogą zacinać się podczas przechwytywania. Czas trwania przejścia należy utrzymywać poniżej 300 ms i unikać animowania wyjątkowo złożonych poddrzew.

Przed użyciem należy sprawdzić dostępność API: if (!document.startViewTransition) { updateDom(); return; }. Mechanizm awaryjny aktualizuje DOM normalnie, bez animacji. View Transitions to progresywne ulepszenie — aplikacja działa bez nich, a tam, gdzie są obsługiwane, po prostu zapewniają lepsze wrażenia.

Co umożliwia właściwość view-transition-name przypisana do elementu podczas View Transition?

View Transitions API umożliwia przenikanie i animacje przekształcania między stanami DOM lub nawigacjami między stronami przy użyciu minimalnej ilości kodu. Nazwane elementy przejścia są automatycznie przekształcane, a własne animacje pseudoelementów zastępują domyślne przenikanie. Należy uwzględniać prefers-reduced-motion i stosować progresywne ulepszanie w nieobsługiwanych przeglądarkach.