Interfejs View Transition API umożliwia tworzenie płynnych wizualnych przejść między różnymi widokami w witrynie. Dzięki temu użytkownicy będą mogli łatwiej poruszać się po witrynie, niezależnie od tego, czy jest ona aplikacją wielostronicową (MPA), czy aplikacją jednostronicową (SPA).
Typowe sytuacje, w których używasz przejść między widokami:
- Miniatura na stronie produktu, która na stronie ze szczegółami produktu zmienia się w obraz w pełnym rozmiarze.
- Stały pasek nawigacyjny, który pozostaje widoczny podczas przechodzenia z jednej strony na drugą.
- Siatka z elementami, które zmieniają pozycję podczas filtrowania.
Wdrażanie przejść między widokami
Przejścia widoku nie są powiązane z konkretną architekturą ani platformą i mogą być aktywowane nie tylko w jednym dokumencie, ale także między 2 różnymi dokumentami.
Oba typy przejść między widokami opierają się na tych samych elementach i zasadach:
- Przeglądarka wykonuje zrzuty starego i nowego stanu.
- DOM jest aktualizowany, gdy renderowanie jest blokowane.
- Przejścia są generowane za pomocą technologii CSS Animations.
Jedyną różnicą między tymi 2 typami jest sposób ich aktywowania.
Przejścia w tym samym dokumencie
Gdy przejście widoku jest uruchamiane w ramach jednego dokumentu, nazywa się przejściem widoku tego samego dokumentu. Zwykle tak się dzieje w przypadku aplikacji jednostronicowych. Przejścia między widokami tego samego dokumentu są obsługiwane w Chrome od wersji 111.
Jak uruchomić
Aby wywołać przejścia w tym samym dokumencie, wywołaj funkcję document.startViewTransition:
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
Przykład
Przykład kart to aplikacja SPA, która używa przejść w tym samym dokumencie do animowania kart podczas dodawania lub usuwania nowych kart.
Zacznij tworzyć
Więcej informacji o przejściach między widokiem tego samego dokumentu znajdziesz na specjalnej stronie z dokumentacją.
Tworzenie przejść między widokiem tego samego dokumentu
Przejścia między widokami dokumentów
Przejście między widokami w 2 różnych dokumentach nazywa się przejściem między widokami dokumentów. Jest to typowe dla MPA. Przejścia między widokami dokumentów są obsługiwane w Chrome w wersji 126 i nowszych.
Obsługa przeglądarek
Jak uruchomić
Przejścia między widokami dokumentów są wywoływane przez nawigację między dokumentami w tej samej domenie, jeśli obie strony zostały włączone. Inaczej mówiąc, nie ma interfejsu API, którego można wywołać, aby rozpocząć przejście do widoku obejmującego wiele dokumentów. Gdy użytkownik kliknie link, kliknięcie spowoduje przejście do widoku.
Aby to zrobić, użyj tego fragmentu kodu CSS:
@view-transition {
navigation: auto;
}
Przykład
Ten przykład nawigatora warstw to MPA, który używa przejść między widokami 2 różnych dokumentów. W zależności od tego, czy przechodzisz do kolejnych poziomów nawigacji, strony są dodawane do stosu lub usuwane z niego.
Zacznij tworzyć
Dowiedz się wszystkiego o przejściach między widokami dokumentów.