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

Bramus

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.
Przejścia utworzone za pomocą interfejsu View Transition API. Wypróbuj stronę demonstracyjną. Wymaga Chrome w wersji 111 lub nowszej.

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:

  1. Przeglądarka wykonuje migawki starego i nowego stanu.
  2. DOM jest aktualizowany, gdy renderowanie jest wstrzymane.
  3. 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.

Obsługa przeglądarek

  • 111
  • 111
  • x
  • x

Źródło

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.

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

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.

Obsługa przeglądarek

  • 126
  • 126
  • x
  • x

Źródło

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.

Nagranie demonstracji usługi Stack Navigator. Wymaga Chrome w wersji 126 lub nowszej.

Zacznij tworzyć

Dowiedz się wszystkiego, co trzeba wiedzieć o przechodzeniu widoków między dokumentami.

Tworzenie przejść między widokami danych