Płynne przejścia dzięki interfejsowi View Transition API

Bramus

Interfejs View Transition API umożliwia tworzenie płynnych przejść wizualnych między różnymi widokami w witrynie. Zapewnia to użytkownikom bardziej atrakcyjne wizualnie wrażenia podczas poruszania się po witrynie, niezależnie od tego, czy jest ona aplikacją wielostronicową (MPA) czy jednostronicową (SPA).

Typowe sytuacje, w których możesz użyć przejść widoku:

• Miniatura na stronie z listą produktów, która po kliknięciu przekształca się w pełnowymiarowe zdjęcie produktu na stronie ze szczegółami produktu.
• stały pasek nawigacyjny, który pozostaje na swoim miejscu podczas przechodzenia z jednej strony na drugą;
• siatkę z elementami zmieniającymi pozycje podczas filtrowania;

Implementowanie przejść widoku

Przejścia widoku nie są powiązane z określoną architekturą aplikacji ani platformą i można je wywoływać nie tylko w jednym dokumencie, ale też między dwoma różnymi dokumentami.

Oba typy przejść widoku opierają się na tych samych elementach składowych i zasadach:

1. Przeglądarka robi migawki starego i nowego stanu.
2. DOM jest aktualizowany, gdy renderowanie jest wstrzymane.
3. Przejścia są oparte na animacjach CSS.

Jedyną różnicą między tymi typami jest sposób ich wywoływania.

Przejścia między widokami w tym samym dokumencie

Gdy przejście widoku jest uruchamiane w jednym dokumencie, nazywa się je przejściem widoku w tym samym dokumencie. Zwykle ma to miejsce w przypadku aplikacji jednostronicowych. Przejścia widoku w tym samym dokumencie są obsługiwane w Chrome od wersji 111.

Jak wywołać

Wywołaj przejścia widoku w tym samym dokumencie, wywołując 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 SPA, która wykorzystuje przejścia widoku w tym samym dokumencie do animowania kart podczas dodawania lub usuwania nowych.

Zacznij tworzyć

Więcej informacji o przejściach w widoku tego samego dokumentu znajdziesz na stronie dokumentacji.

Tworzenie przejść między widokami w tym samym dokumencie

Przejścia między dokumentami

Gdy przejście widoku następuje między dwoma różnymi dokumentami, nazywa się je przejściem widoku między dokumentami. Jest to typowe dla umów MPA. Przejścia między dokumentami są obsługiwane w Chrome 126 i nowszych wersjach.

Jak wywołać

Przejścia widoku między dokumentami są wywoływane przez nawigację między dokumentami w tej samej domenie, jeśli obie strony wyraziły na to zgodę. Innymi słowy, nie ma interfejsu API, którego można by wywołać, aby rozpocząć przejście do widoku między dokumentami. Gdy użytkownik kliknie link, kliknięcie wywoła przejście widoku.

Aby wyrazić zgodę, użyj tego fragmentu kodu CSS:

@view-transition {
  navigation: auto;
}

Przykład

Poniższy przykład nawigatora stosu to aplikacja wielostronicowa, która używa przejść między widokami w różnych dokumentach. W zależności od tego, czy przechodzisz do kolejnych stron, są one dodawane do stosu lub z niego usuwane.

Zacznij tworzyć

Dowiedz się wszystkiego o przejściach między widokami w różnych dokumentach.

Tworzenie przejść między widokami w różnych dokumentach