Dokumentübergreifende Übergänge

Mit dokumentübergreifenden Ansichtsübergängen können Sie flüssige, app-ähnliche Übergänge zwischen verschiedenen Seiten einer mehrseitigen Anwendung (Multi-Page Application, MPA) erstellen. Standardmäßig führt der Browser eine Überblendung durch. Sie können dies jedoch an die Ästhetik Ihrer Website anpassen.

Implementierungsschritte

1. Dokumentübergreifende Ansichtsübergänge aktivieren

Sowohl die Quell- als auch die Zielseite müssen für Ansichtsübergänge aktiviert sein, damit der Browser sie bei der Navigation auslöst.

/* 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. Übergangsanimationen anpassen (optional)

Sie können die alten und neuen Zustände des Übergangs mithilfe von Pseudoelementen ansprechen, um Effekte wie Einblendungen oder Enthüllungen zu erstellen.

/* 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. Richtungsübergänge erstellen (optional)

Je nachdem, zwischen welchen Seiten Sie wechseln, möchten Sie möglicherweise unterschiedliche Übergangseffekte verwenden. Wenn Sie beispielsweise von einer Startseite zu einer Kontaktseite wechseln, möchten Sie möglicherweise, dass neue Inhalte von rechts eingeblendet werden. Wenn Sie zur Startseite zurückkehren, wäre derselbe Effekt nicht sinnvoll.

Wenn die Seite, zu der Sie navigieren, immer denselben Übergangstyp hat, unabhängig davon, wie Sie dorthin gelangen, können Sie ihn mit types in der @view-transition-Regel angeben.

@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;
  }
}

Sie können Übergangstypen auch bedingt in einem Event-Listener für pagereveal angeben.

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

Verwenden Sie dann den Pseudoselektor :active-view-transition-type(), um die verschiedenen Animationen für jeden Typ anzuwenden.

: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;
  }
}

Fallback-Strategien

Wenn ein Browser keine Ansichtsübergänge oder dokumentübergreifenden Ansichtsübergänge unterstützt, wird eine standardmäßige sofortige Seitennavigation ausgeführt. Dokumentübergreifende Ansichtsübergänge sind eine progressive Verbesserung. Die Hauptfunktionen der Website bleiben davon unberührt.

So prüfen Sie die Unterstützung in JavaScript:

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

Wenn ein Browser die Navigation API nicht unterstützt, können Sie sie nicht verwenden, um einen Übergangstyp zu bestimmen. Verwenden Sie eine alternative Methode, um den Übergangstyp zu bestimmen, oder geben Sie einen Fallback-Übergangstyp an. Andernfalls führt der Browser eine standardmäßige sofortige Seitennavigation durch.

So prüfen Sie die Unterstützung in JavaScript:

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