Przejścia nawigacji kierunkowej

Aplikacje jednostronicowe (SPA) dają wrażenie nawigacji, zastępując zawartość strony bez przechodzenia na nową stronę. Domyślnie treść jest po prostu zastępowana bez żadnych przejść. Przejścia kierunkowe mogą wizualnie wzmocnić relację przestrzenną między widokami.

Przez wysuwanie nowych treści z kierunku, w którym porusza się użytkownik, tworzysz mapę mentalną struktury aplikacji. Na przykład witryna produktu może wyświetlać przejście w prawo, aby przejść „do przodu”, i w lewo, aby przejść „do tyłu”, a pokaz slajdów może przechodzić w górę i w dół, aby wyświetlić następny i poprzedni slajd.

Etapy wdrażania

1. Wykrywanie kierunku nawigacji: określanie, czy użytkownik porusza się w aplikacji „do przodu” czy „do tyłu”. Sposób wykrywania kierunku zależy od konkretnego przypadku użycia.
2. Trigger Transition with Types (Wywołaj przejście z typami): przekaż kierunek w tablicy types do document.startViewTransition(), aby skategoryzować przejście.
3. Definiowanie animacji kierunkowych za pomocą CSS: użyj pseudoklasy :active-view-transition-type(), aby zastosować określone animacje na podstawie typu nawigacji.

Definiowanie klatek kluczowych

Zdefiniuj animacje przesuwania do i z każdego kierunku. Aby uzyskać najlepszą wydajność, animuj zmiany pozycji za pomocą właściwości transform lub poszczególnych właściwości przekształcenia: scale, rotate i translate. Właściwość opacity też jest zwykle wydajna, ale unikaj animowania innych właściwości CSS bez wcześniejszego sprawdzenia, czy nie powodują one ponownego renderowania układu lub ponownego malowania.

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

Konfigurowanie ustawień udostępniania animacji

Użyj selektora ::view-transition-group(root), aby zastosować ustawienia animacji, które są wspólne dla wszystkich przejść.

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

Stosowanie animacji kierunkowych

Użyj pseudoklasy active-view-transition-type, aby kierować reklamy na widoki przejścia, gdy aktywny jest typ „do przodu” lub „do tyłu”.

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

Wywoływanie przejścia

Podczas nawigacji przekaż odpowiedni typ do metody startViewTransition.

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

Ułatwienia dostępu

Zawsze respektuj preferencje użytkownika dotyczące ograniczenia ruchu, wyłączając lub upraszczając animacje.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

Strategie zastępcze

Interfejs View Transitions API to progresywne ulepszanie. W nieobsługiwanych przeglądarkach document.startViewTransition będzie undefined. Musisz opakować logikę nawigacji w sprawdzenie wykrywania funkcji, aby mieć pewność, że aktualizacja DOM nadal będzie następować natychmiast bez animacji, jak pokazano w tej funkcji pomocniczej.

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}