Interfejs View Transition API umożliwia płynne przejście między różnymi widokami w witrynie. Dzięki temu użytkownicy, którzy poruszają się po Twojej witrynie, będą bardziej atrakcyjne wizualnie, niezależnie od tego, czy została ona utworzona jako aplikacja wielostronicowa (MPA) czy jednostronicowa (SPA).
Typowe sytuacje, w których warto użyć przejść widoku, to:
- Miniatura obrazu na stronie z informacjami o produkcie, która na stronie ze szczegółami produktu zmienia się w pełnowymiarowe zdjęcie produktu.
- nieruchomy pasek nawigacyjny, który nie zmienia się podczas przechodzenia z jednej strony na drugą.
- Siatka, w której elementy zmieniają się w trakcie filtrowania.
Wdrażanie przejścia między widokami
Przejścia widoków nie są powiązane z konkretną architekturą ani platformą i mogą być uruchamiane nie tylko w przypadku pojedynczego dokumentu, ale także między 2 różnymi dokumentami.
Oba rodzaje przenoszenia widoku opierają się na tych samych elementach składowych i zasadach:
- Przeglądarka wykonuje migawki starego i nowego stanu.
- DOM jest aktualizowany, gdy renderowanie jest wstrzymane.
- Przejścia są generowane przez animacje CSS.
Jedyną różnicą w obu typach jest sposób ich wyzwalania.
Przejścia widoku tego samego dokumentu
Przejście w widoku pojedynczego dokumentu jest nazywane przejściem widoku tego samego dokumentu. Zwykle dzieje się tak w aplikacjach jednostronicowych (SPA). Przejścia widoku tego samego dokumentu są obsługiwane w Chrome od wersji 111.
Jak aktywować
Uruchamianie przejść w widoku tego samego dokumentu przez wywołanie metody 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
Poniższy przykład kart to aplikacja na jednej stronie, która korzysta z przejścia widoku tego samego dokumentu do animacji, gdy dodawane są lub usuwane nowe karty.
Zacznij tworzyć
Wszystko, co trzeba wiedzieć na temat przechodzenia między widokami tych samych dokumentów, znajdziesz na specjalnej stronie dokumentacji.
Tworzenie przejść w widoku tego samego dokumentu
Przejścia widoku między dokumentami
Przejście między widokami 2 różnych dokumentów jest nazywane przejściem między dokumentami. Jest to typowa sytuacja w przypadku MPA. Przejścia między dokumentami są obsługiwane w Chrome 126 i nowszych wersjach.
Jak aktywować
Przejścia widoku między dokumentami są wywoływane przez nawigację w różnych dokumentach z tej samej domeny, jeśli obie strony są włączone. Innymi słowy, nie ma interfejsu API, który można wywołać w celu rozpoczęcia przejścia między widokami. Gdy użytkownik kliknie link, spowoduje to przejście do widoku.
Włącz u góry strony, użyj tego fragmentu kodu CSS:
@view-transition {
navigation: auto;
}
Przykład
Poniższy przykładowy przykład Stack Navigator to plik MPA, który korzysta z przejść między widokami między 2 różnymi dokumentami. W zależności od tego, czy zagłębiasz się w nawigację, strony są zepchane na stos, czy też nie.
Zacznij tworzyć
Dowiedz się wszystkiego, co trzeba wiedzieć o przechodzeniu widoków między dokumentami.