Przejścia między dokumentami

Przejścia między widokami w różnych dokumentach umożliwiają tworzenie płynnych, przypominających aplikacje przejść między różnymi stronami aplikacji wielostronicowej (MPA). Domyślnie przeglądarka wykonuje efekt przenikania, ale możesz go dostosować do estetyki swojej witryny.

Etapy wdrażania

1. Akceptacja przejść między dokumentami

Zarówno strona źródłowa, jak i strona docelowa muszą wyrazić zgodę na przejścia widoku, aby przeglądarka mogła je aktywować podczas nawigacji.

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Add to a global stylesheet shared by both pages */
  @view-transition {
    /* Enables transitions for same-origin navigations */
    navigation: auto;
  }
}

2. Dostosowywanie animacji przejścia (opcjonalnie)

Możesz kierować na stary i nowy stan przejścia za pomocą pseudoelementów, aby tworzyć efekty takie jak slajdy czy odkrywanie.

/* Customizing the outgoing page animation */
::view-transition-old(root) {
  /* Move the old page out to the left */
  animation: 0.4s ease-in both slide-out;
}

/* Customizing the incoming page animation */
::view-transition-new(root) {
  /* Move the new page in from the right */
  animation: 0.4s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

3. Tworzenie przejść kierunkowych (opcjonalnie)

Możesz chcieć używać różnych efektów przejścia w zależności od stron, między którymi się poruszasz. Na przykład podczas przechodzenia ze strony głównej na stronę kontaktową możesz chcieć, aby nowa treść pojawiała się z prawej strony. Gdy wracasz na stronę główną, nie ma sensu, aby efekt był taki sam.

Jeśli strona, do której przechodzisz, zawsze będzie miała ten sam typ przejścia, niezależnie od tego, jak do niej dotrzesz, możesz go określić za pomocą types w regule @view-transition.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    /* Specify the types of view transitions that will always be used on this page. */
    types: previous;
  }
}

Możesz też warunkowo określić typy przejść w detektorze zdarzeń dla elementu pagereveal.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition && window.navigation?.activation) {
    // Use application-specific logic to compute a transition type
     const transitionType = yourTransitionTypeLogic(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

Następnie użyj pseudoselektora :active-view-transition-type(), aby zastosować różne animacje dla każdego typu.

:active-view-transition-type(next) {
  &::view-transition-old(root) {
    animation-name: slide-out-next;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-next;
  }
}
:active-view-transition-type(previous) {
  &::view-transition-old(root) {
    animation-name: slide-out-previous;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-previous;
  }
}

Strategie zastępcze

Jeśli przeglądarka nie obsługuje przejść widoku lub przejść widoku między dokumentami, wykona standardową natychmiastową nawigację na stronie. Przejścia między dokumentami to progresywne ulepszenie, które nie wpływa na główną funkcjonalność witryny.

Aby sprawdzić, czy JavaScript jest obsługiwany:

if ('onpagereveal' in window) {
  // Browser supports cross-document view transitions
}

Jeśli przeglądarka nie obsługuje interfejsu Navigation API, nie będzie można go użyć do określenia typu przejścia. Użyj innej metody określania typu przejścia lub podaj zastępczy typ przejścia. W przeciwnym razie przeglądarka wykona standardową nawigację na stronie błyskawicznej.

Aby sprawdzić, czy JavaScript jest obsługiwany:

if (window.navigation?.activation) {
  // Browser supports the Navigation API
}