Übergänge bei der Richtungsnavigation

Bei Single-Page-Anwendungen (SPAs) wird die Navigation simuliert, indem der Inhalt der Seite ersetzt wird, ohne dass eine neue Seite aufgerufen wird. Standardmäßig wird der Inhalt einfach ohne Übergänge ersetzt. Richtungsübergänge können eine räumliche Beziehung zwischen Ansichten visuell verstärken.

Wenn neue Inhalte aus der Richtung eingeblendet werden, in die sich der Nutzer bewegt, entsteht eine mentale Karte der Anwendungsstruktur. Beispielsweise kann auf einer Produktwebsite ein Übergang nach rechts für „Weiter“ und nach links für „Zurück“ angezeigt werden. Bei einer Diashow kann ein Übergang nach oben und unten angezeigt werden, um die nächste und vorherige Folie anzuzeigen.

Implementierungsschritte

1. Navigationsrichtung erkennen: Bestimmen Sie, ob sich der Nutzer im Anwendungsablauf „vorwärts“ oder „rückwärts“ bewegt. Wie Sie die Richtung erkennen, hängt von Ihrem Anwendungsfall ab.
2. Übergang mit Typen auslösen: Übergeben Sie die Richtung in einem types-Array an document.startViewTransition(), um den Übergang zu kategorisieren.
3. Richtungsabhängige Animationen mit CSS definieren: Verwenden Sie die Pseudoklasse :active-view-transition-type(), um bestimmte Animationen basierend auf dem Navigationstyp anzuwenden.

Keyframes definieren

Definieren Sie Schiebeanimationen in jede Richtung und aus jeder Richtung. Für eine optimale Leistung sollten Sie Positionsänderungen mit der Property transform oder den einzelnen Transformations-Properties scale, rotate und translate animieren. opacity ist im Allgemeinen ebenfalls leistungsstark. Vermeiden Sie jedoch, andere CSS-Eigenschaften zu animieren, ohne vorher zu prüfen, ob sie Layout oder Painting auslösen.

/* 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%); }
}

Einstellungen für geteilte Animationen einrichten

Verwenden Sie den Selektor ::view-transition-group(root), um Animationseinstellungen anzuwenden, die für alle Übergänge gelten.

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

Richtungsanimationen anwenden

Verwenden Sie die Pseudoklasse active-view-transition-type, um die Übergangsansichten gezielt anzusprechen, wenn der Typ „forward“ oder „backward“ aktiv ist.

/* 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;
}

Übergang auslösen

Übergeben Sie bei der Navigation den entsprechenden Typ an die Methode startViewTransition.

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

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

Bedienungshilfen

Berücksichtigen Sie immer die Einstellungen der Nutzer für reduzierte Bewegungen, indem Sie Animationen deaktivieren oder vereinfachen.

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

Fallback-Strategien

Die View Transitions API ist eine progressive Verbesserung. In nicht unterstützten Browsern ist document.startViewTransition undefined. Sie müssen Ihre Navigationslogik in eine Feature-Erkennungsprüfung einbinden, damit die DOM-Aktualisierung weiterhin sofort ohne Animation erfolgt, wie in dieser Hilfsfunktion gezeigt.

/**
 * 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
  });
}