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 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 nawigacji, który pozostaje na swoim miejscu podczas przechodzenia z jednej strony na drugą.
• Siatka z elementami, które zmieniają pozycję podczas filtrowania.

Wdrażanie przejść między widokami

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 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 typami jest sposób ich wywoływania.

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 widokiem tego samego dokumentu są obsługiwane w Chrome od wersji Chrome 111.

Jak uruchomić

Aktywuj przejścia między widokiem tego samego dokumentu, wywołując 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

Oto przykład kart to interfejs SPA, który korzysta z animacji w widoku tego samego dokumentu, aby animować karty w miarę dodawania lub usuwania nowych.

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.

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 nawigacji głębiej, czy nie, strony są umieszczane na stosie lub wyskakują.

Zacznij tworzyć

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

Tworzenie przejść między dokumentami