View Transitions API: przykłady na żywo dla SPA i MPA | We.Inc
Działające przykłady View Transitions API: startViewTransition w liście, którą możesz przetasować, nazwane elementy, które się przekształcają, @view-transition między stronami, typy, React i wsparcie przeglądarek.
View Transitions API: przykłady
View Transitions API animuje przejście między dwoma stanami strony. W aplikacji jednostronicowej opakuj aktualizację DOM w document.startViewTransition(() => update()). Między stronami w tym samym originie dodaj @view-transition { navigation: auto; } do obu stron. Nadaj elementowi unikalną view-transition-name, a przeglądarka przekształci go z dawnej pozycji w nową.
Dwa rodzaje view transitions
W tym samym dokumencie (SPA)
Między dokumentami (MPA)
Jak je uruchomić
document.startViewTransition()
@view-transition { navigation: auto; } na obu stronach
Chrome i Edge
111 i nowsze
126 i nowsze
Safari
18 i nowsze
18.2 i nowsze
Firefox
144 i nowsze
Jeszcze nieobsługiwane
Baseline
Nowo dostępne (październik 2025)
Poza Baseline
Większość objaśnień view transitions opisuje drzewo pseudoelementów i na tym kończy. Ta strona zaczyna od działającego demo w Twojej przeglądarce: przetasuj siatkę, otwórz kartę w widoku szczegółów i obserwuj, jak przesuwają się nazwane elementy. Potem podaje kod każdego wzorca, konfigurację między stronami i rozwiązania awaryjne dla przeglądarek bez wsparcia.
Naciśnij Tasuj, aby zmienić kolejność siatki. Każdy kafelek ma własną view-transition-name, więc każdy płynnie przesuwa się na nowe miejsce.
Kliknij kafelek, aby go otworzyć. Kolorowy blok i tytuł przekształcają się w widok szczegółów, bo mają z nim wspólne nazwy.
Jeśli Twoja przeglądarka nie ma tego API, demo i tak aktualizuje się natychmiast i o tym informuje.
Skopiuj poniższe fragmenty dla czystego JavaScript, React i stron wielostronicowych.
Każda view-transition-name na stronie musi być unikalna w chwili wykonania zrzutu. Duplikat sprawia, że obietnica ready zostaje odrzucona, a przejście jest pomijane.
Użyj view-transition-name: match-element w przejściu w tym samym dokumencie, aby automatycznie nazwać każdy element listy.
Pobierz dane przed wywołaniem startViewTransition. Renderowanie jest zamrożone, gdy działa callback aktualizacji, więc wolny callback wygląda jak zawieszenie.
Sprawdź, czy istnieje document.startViewTransition, zanim go wywołasz, a gdy go brak, po prostu wykonaj aktualizację.
Wyłącz animacje w zapytaniu prefers-reduced-motion: reduce: zmiana stanu i tak nastąpi.
Najczęściej zadawane pytania
Co robi document.startViewTransition?
Robi zrzut bieżącej strony, uruchamia Twój callback aktualizacji, a potem animuje przejście od starego zrzutu do nowego, żywego stanu. Zwraca obiekt ViewTransition z obietnicami ready, finished i updateCallbackDone oraz metodą skipTransition().
Jak dodać view transitions między stronami?
Umieść @view-transition { navigation: auto; } w CSS zarówno strony, którą opuszczasz, jak i tej, na którą trafiasz. Strony muszą mieć ten sam origin, a domyślnie dostajesz przenikanie. Nadaj pasującym elementom tę samą view-transition-name na obu stronach, aby się przekształcały.
Czy view transitions działają w Firefox?
Przejścia w tym samym dokumencie działają od Firefox 144. Przejścia między dokumentami w chwili pisania nie były obsługiwane w Firefox, więc w tych przeglądarkach nawigacja odbywa się po prostu bez animacji.
Jak używać view transitions w React?
Wywołaj document.startViewTransition i zaktualizuj stan wewnątrz flushSync z react-dom, aby React zapisał nowy DOM synchronicznie, zanim przeglądarka zrobi nowy zrzut.
Jak dostosować animację?
Ostyluj pseudoelementy. ::view-transition-old(name) to wychodzący zrzut, ::view-transition-new(name) przychodzący, a ::view-transition-group(name) kontroluje rozmiar i pozycję. Dla całej strony użyj nazwy root.
Co dzieje się podczas przejścia
Przeglądarka zapisuje bieżący stan jako obrazy: jeden dla strony i po jednym dla każdego nazwanego elementu. Wykonuje Twoją aktualizację, gdy renderowanie jest wstrzymane, a potem zapisuje nowy stan.
Buduje drzewo pseudoelementów nad stroną: grupę dla każdej nazwy, zawierającą stary i nowy obraz. Domyślnie grupa animuje rozmiar i pozycję, a oba obrazy się przenikają, co tworzy efekt przekształcenia.
Dobre nazywanie elementów
Nazwa łączy element w starym stanie z elementem w nowym stanie. Zdjęcie produktu na liście i duże zdjęcie na jego stronie szczegółów mogą mieć wspólną nazwę, na przykład product-42, a przeglądarka animuje jedno w drugie.
Ustawiaj nazwę tylko tam, gdzie jest potrzebna. Nazwanie elementu, który się nie zmienia, i tak kosztuje osobny zrzut.
Typy dla różnych kierunków
startViewTransition przyjmuje też obiekt options z funkcją update i tablicą types. Typ taki jak forwards lub backwards można potem dopasować w CSS selektorem :active-view-transition-type(), dzięki czemu cofanie przesuwa się w drugą stronę.
W nawigacji między stronami deskryptor types wewnątrz @view-transition ustawia typy w ten sam sposób.
Przejścia w tym samym dokumencie
startViewTransition z wykrywaniem wsparcia
Przeglądarki bez tego API od razu wykonują aktualizację, więc nic się nie psuje.
Przekształcenie miniatury w duży obraz
Nazwę może mieć naraz tylko jeden element, więc ustaw ją na klikniętej miniaturze tuż przed przejściem.
React
startViewTransition z flushSync
flushSync sprawia, że React zatwierdza nowy DOM wewnątrz callbacku.
Przejścia między dokumentami
Przesuwanie między stronami witryny wielostronicowej
Dodaj to do arkusza stylów każdej strony, która ma brać udział. Tylko ten sam origin.
Dokumentacja API
Elementy View Transitions API
Nazwa
Rodzaj
Co robi
document.startViewTransition(update)
Metoda
Rozpoczyna przejście w tym samym dokumencie i zwraca ViewTransition
ViewTransition.ready
Promise
Rozwiązuje się, gdy pseudoelementy istnieją, a animacja zaraz się zacznie
ViewTransition.finished
Promise
Rozwiązuje się, gdy animacja się kończy, a nowy stan jest aktywny
ViewTransition.updateCallbackDone
Promise
Rozwiązuje się, gdy Twój callback aktualizacji się zakończy
ViewTransition.skipTransition()
Metoda
Pomija animację: aktualizacja i tak się wykonuje
Właściwość CSS
Daje elementowi własny zrzut do przekształcenia
@view-transition
Reguła @ w CSS
Włącza dla strony przejścia między dokumentami
::view-transition-old() / -new()
Pseudoelementy
Wychodzący i przychodzący zrzut
::view-transition-group()
Pseudoelement
Animuje rozmiar i pozycję dla jednej nazwy
pageswap / pagereveal
Zdarzenia
Pozwalają skryptowi dostosować przejście między dokumentami
Port
Łąka
Żar
Zmierzch
Łupek
Koral
Ograniczenie ruchu jest włączone, więc zmiana była natychmiastowa.
Twoja przeglądarka nie obsługuje view transitions, więc zmiana była natychmiastowa.
Demo na żywo
Przetasuj siatkę lub otwórz kartę. Każdy kafelek ma własną view-transition-name, więc przeglądarka animuje go do nowej pozycji.
Tasuj
Wróć do siatki
Kolorowy blok i tytuł przekształciły się z siatki, bo zachowują tu te same nazwy.