View Transition API

Ansichtsübergänge sind eine beliebte Designwahl, um die kognitive Belastung der Benutzer zu reduzieren, ihnen den Kontext beizubehalten und die wahrgenommene Latenzzeit beim Bewegen zwischen Zuständen oder Ansichten einer Anwendung zu verringern.

Allerdings war das Erstellen von Ansichtsübergängen im Web historisch gesehen schwierig:

• Übergänge zwischen Zuständen in Single-Page-Apps (SPAs) erfordern häufig das Schreiben umfangreicher CSS- und JavaScript-Codes, um:
  • Das Laden und Positionieren der alten und neuen Inhalte zu handhaben.
  • Die alten und neuen Zustände zu animieren, um den Übergang zu schaffen.
  • Unbeabsichtigte Benutzerinteraktionen mit dem alten Inhalt zu verhindern, die Probleme verursachen könnten.
  • Den alten Inhalt zu entfernen, sobald der Übergang abgeschlossen ist. Barrierefreiheitsprobleme wie der Verlust der Leseposition, Verwirrung durch fehlenden Fokus und merkwürdiges Verhalten bei Live-Regionen-Ankündigungen können ebenfalls auftreten, wenn sowohl der neue als auch der alte Inhalt gleichzeitig im DOM vorhanden sind.
• Übergänge zwischen Dokumenten (d.h. Navigieren zwischen verschiedenen Seiten in MPAs) waren historisch gesehen unmöglich.

Die View Transition API bietet eine einfache Möglichkeit, die erforderlichen Ansichtsänderungen und Übergangsanimationen für beide oben genannten Anwendungsfälle zu verwalten.

Das Erstellen eines Ansichtsübergangs, der die Standardübergangsanimationen des Browsers verwendet, ist sehr schnell zu erledigen, und es gibt Funktionen, die Sie sowohl die Übergangsanimation anpassen als auch den Ansichtsübergang selbst manipulieren lassen (z.B. Umstände festlegen, unter denen die Animation übersprungen wird) für sowohl SPA- als auch MPA-Ansichtsübergänge.

Weitere Informationen finden Sie unter Using the View Transition API.

ViewTransition

Repräsentiert einen Ansichtsübergang und bietet Funktionen, um auf das Erreichen verschiedener Zustände des Übergangs zu reagieren (z.B. bereit für die Animation oder Animation abgeschlossen) oder den Übergang ganz zu überspringen.

Document.startViewTransition()

Startet einen neuen Ansichtsübergang innerhalb desselben Dokuments (SPA) und gibt ein ViewTransition-Objekt zurück, um diesen darzustellen.

PageRevealEvent

Das Ereignisobjekt für das pagereveal-Ereignis. Während einer Navigation zwischen Dokumenten ermöglicht es Ihnen, den zugehörigen Ansichtsübergang zu manipulieren (bietet Zugriff auf das relevante ViewTransition-Objekt) von dem Dokument aus, zu dem navigiert wird, falls ein Ansichtsübergang durch die Navigation ausgelöst wurde.

PageSwapEvent

Das Ereignisobjekt für das pageswap-Ereignis. Während einer Navigation zwischen Dokumenten ermöglicht es Ihnen, den zugehörigen Ansichtsübergang zu manipulieren (bietet Zugriff auf das relevante ViewTransition-Objekt) von dem Dokument aus, von dem navigiert wird, falls ein Ansichtsübergang durch die Navigation ausgelöst wurde. Es bietet auch Zugriff auf Informationen über den Navigationstyp und die aktuellen sowie die Ziel-Dokumenthistorik-Einträge.

Das Window pagereveal-Ereignis

Wird ausgelöst, wenn ein Dokument erstmals dargestellt wird, entweder beim Laden eines neuen Dokuments aus dem Netzwerk oder beim Aktivieren eines Dokuments (entweder aus dem back/forward cache (bfcache) oder prerender).

Das Window pageswap-Ereignis

Wird ausgelöst, wenn ein Dokument aufgrund einer Navigation entladen wird.

<link rel="expect">

Identifiziert die wichtigsten Inhalte des zugehörigen Dokuments für die anfängliche Ansicht der Seite durch den Benutzer. Die Dokumentdarstellung wird blockiert, bis die kritischen Inhalte analysiert wurden, um einen konsistenten ersten Anstrich — und somit einen Ansichtsübergang — über alle unterstützenden Browser hinweg zu gewährleisten.

@view-transition

Im Falle einer Navigation zwischen Dokumenten wird @view-transition verwendet, um die aktuellen und Ziel-Dokumente für einen Ansichtsübergang zu optieren.

view-transition-name

Versorgt das ausgewählte Element mit einem separaten identifizierenden Namen und führt es in einen separaten Ansichtsübergang vom Hauptansichtsübergang — oder keinen Ansichtsübergang, wenn der Wert none angegeben ist.

::view-transition

Der Wurzelpunkt der Ansichtsübergangsüberlagerung, die alle Ansichtsübergänge enthält und über allen anderen Seiteninhalten liegt.

::view-transition-group()

Der Ausgangspunkt eines einzelnen Ansichtsübergangs.

::view-transition-image-pair()

Der Container für die alten und neuen Ansichten eines Ansichtsübergangs — vor und nach dem Übergang.

::view-transition-old()

Eine statische Momentaufnahme der alten Ansicht vor dem Übergang.

::view-transition-new()

Eine Live-Darstellung der neuen Ansicht nach dem Übergang.

• Grundlegende View-Transition-SPA-Demo: Eine einfache Bildgalerie-Demo mit Ansichtsübergängen, die separate Animationen zwischen alten und neuen Bildern und alten und neuen Bildunterschriften bietet.
• Grundlegende View-Transition-MPA-Demo: Eine Beispiel-Zwei-Seiten-Website, die die Verwendung von Übergängen zwischen Dokumenten (MPA) zeigt und einen benutzerdefinierten "Wisch-nach-oben"-Übergang bietet, wenn zwischen den beiden Seiten navigiert wird.
• HTTP 203 Playlist: Eine Video-Player-Demo-App, die mehrere verschiedene SPA-Ansichtsübergänge bietet, von denen viele in Smooth transitions with the View Transition API erläutert werden.
• Liste der Chrome DevRel-Teammitglieder: Eine einfache Team-Profilseiten-App, die zeigt, wie die pagereveal- und pageswap-Ereignisse verwendet werden, um die ausgehenden und eingehenden Animationen eines Ansichtsübergangs zwischen Dokumenten basierend auf den "von" und "zu" URLs anzupassen.

• Smooth transitions with the View Transition API auf developer.chrome.com (2024)
• View Transition API: Creating Smooth Page Transitions auf stackdiary.com (2023)
• View Transitions API: Single Page Apps Without a Framework auf www.debugbear.com (2024)