Reibungslose Übergänge mit der View Transition API

Bramus

Mit der View Transition API können Sie nahtlose visuelle Übergänge zwischen verschiedenen Ansichten auf Ihrer Website erstellen. Das sorgt für eine visuell ansprechendere Nutzererfahrung, unabhängig davon, ob es sich um eine mehrseitige Anwendung (Multi-Page-Anwendung, MPA) oder eine Single-Page-Anwendung (SPA) handelt.

Typische Situationen, in denen Sie Ansichtsübergänge verwenden würden:

• Eine Miniaturansicht auf einer Seite mit Produktinformationen, die auf der Seite mit den Produktdetails zu einem Produktbild in voller Größe übergeht.
• Eine fixierte Navigationsleiste, die an Ort und Stelle bleibt, wenn Sie von einer Seite zur nächsten wechseln.
• Ein Raster mit Elementen, die sich beim Filtern verschieben.

Ansichtsübergänge implementieren

Ansichtsübergänge sind nicht an eine bestimmte Anwendungsarchitektur oder ein bestimmtes Framework gebunden und können nicht nur in einem einzelnen Dokument, sondern auch zwischen zwei verschiedenen Dokumenten ausgelöst werden.

Beide Arten von Ansichtenübergängen basieren auf denselben Bausteinen und Prinzipien:

1. Der Browser erstellt Snapshots des alten und des neuen Status.
2. Das DOM wird aktualisiert, während das Rendering unterdrückt wird.
3. Die Übergänge werden durch CSS-Animationen unterstützt.

Der einzige Unterschied zwischen den beiden Typen ist die Art und Weise, wie sie ausgelöst werden.

Ansichtsübergänge im selben Dokument

Wenn ein Ansichtsübergang in einem einzelnen Dokument ausgeführt wird, wird er als Ansichtsübergang im selben Dokument bezeichnet. Das ist in der Regel bei Single-Page-Anwendungen (SPAs) der Fall. In Chrome 111 und höher werden Übergänge zwischen Ansichten desselben Dokuments unterstützt.

Auslöser

Lösen Sie durch Aufrufen von document.startViewTransition eine Umstellung auf die Ansicht für dasselbe Dokument aus:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Beispiel

Das folgende Kartenbeispiel ist eine SPA, bei der Ansichtsübergänge im selben Dokument verwendet werden, um die Karten zu animieren, wenn neue hinzugefügt oder entfernt werden.

Gleich mit dem Erstellen loslegen

Auf der entsprechenden Dokumentationsseite finden Sie alle Informationen zu Übergängen zwischen Ansichten desselben Dokuments.

Übergänge zwischen Ansichten desselben Dokuments erstellen

Dokumentenübergreifende Übergänge bei der Ansicht

Wenn ein Ansichtsübergang zwischen zwei verschiedenen Dokumenten stattfindet, wird dies als dokumentübergreifender Ansichtsübergang bezeichnet. Das ist typisch für MPAs. Ansichtsübergänge zwischen Dokumenten werden ab Chrome 126 unterstützt.

Auslöser

Ansichtsübergänge zwischen Dokumenten werden durch eine ursprungsübergreifende Navigation zwischen Dokumenten ausgelöst, wenn beide Seiten aktiviert sind. Mit anderen Worten: Es gibt keine API, die aufgerufen werden kann, um einen dokumentübergreifenden Ansichtsübergang zu starten. Wenn ein Nutzer auf einen Link klickt, wird der Ansichtsübergang ausgelöst.

Verwenden Sie das folgende CSS-Snippet, um die Funktion zu aktivieren:

@view-transition {
  navigation: auto;
}

Beispiel

Das folgende Stack Navigator-Beispiel ist eine MPA, die dokumentübergreifende Übergänge zwischen zwei verschiedenen Dokumenten verwendet. Je nachdem, ob Sie tiefer in die Navigation einsteigen oder nicht, werden Seiten in den Stapel geschoben oder herausgeschoben.

Gleich mit dem Erstellen loslegen

Hier erfahren Sie alles Wissenswerte zu dokumentübergreifenden Ansichten.

Dokumentübergreifende Ansichtsübergänge erstellen