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

Bramus

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 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 na swoim miejscu podczas przechodzenia z jednej strony na drugą.
  • Siatka z elementami, które zmieniają pozycję podczas filtrowania.
Przejścia utworzone za pomocą interfejsu View Transition API. Wypróbuj witrynę demonstracyjną Wymaga Chrome w wersji 111 lub nowszej.

Wdrażanie przejść

Przejścia między widokami nie są powiązane z konkretną architekturą ani platformą aplikacji i mogą być wywoływane nie tylko w pojedynczym dokumencie, ale też między dwoma różnymi dokumentami.

Oba typy przejść między widokami opierają się na tych samych elementach i zasadach:

  1. Przeglądarka wykonuje zrzuty ekranu starego i nowego stanu.
  2. DOM jest aktualizowany, gdy renderowanie jest blokowane.
  3. Przejścia są obsługiwane przez animacje CSS.

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.

Obsługa przeglądarek

  • Chrome: 111.
  • Edge: 111.
  • Firefox: nieobsługiwane.
  • Safari: 18.

Źródło

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 internetowa, która używa przejść w tym samym dokumencie do animowania kart podczas dodawania lub usuwania nowych.

Nagranie prezentacji kart. Wymaga Chrome w wersji 111 lub nowszej.

Zacznij tworzyć

Aby dowiedzieć się wszystkiego o przechodzeniu między widokami tego samego dokumentu, zapoznaj się z odpowiednią stroną dokumentacji.

Tworzenie przejść między widokami 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 126 i nowszych wersjach.

Obsługa przeglądarek

  • Chrome: 126.
  • Edge: 126.
  • Firefox: nieobsługiwane.
  • Safari Technology Preview: obsługiwane.

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. Innymi słowy, 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 włączyć tę funkcję, 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 w różnych dokumentach. W zależności od tego, czy przechodzisz do kolejnych poziomów nawigacji, strony są dodawane do stosu lub usuwane z niego.

Nagranie prezentacji Stack Navigator. Wymaga wersji Chrome 126 lub nowszej.

Zacznij tworzyć

Dowiedz się wszystkiego o przejściach między widokami dokumentów.

Tworzenie przejść między widokami dokumentów