View Transition API

Ansichtsübergänge sind eine beliebte Designwahl, um die kognitive Belastung der Benutzer zu reduzieren, ihnen zu helfen, sich im Kontext zu halten, und wahrgenommene Ladezeiten zu verringern, während sie sich zwischen Zuständen oder Ansichten einer Anwendung bewegen.

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

• Übergänge zwischen Zuständen in Single-Page-Apps (SPAs) erfordern das Schreiben von bedeutendem CSS und JavaScript, um:
  • Das Laden und Positionieren der alten und neuen Inhalte zu handhaben.
  • Die alten und neuen Zustände zu animieren, um den Übergang zu erstellen.
  • Zu verhindern, dass versehentliche Benutzerinteraktionen mit dem alten Inhalt Probleme verursachen.
  • Den alten Inhalt zu entfernen, sobald der Übergang abgeschlossen ist. Barrierefreiheitsprobleme wie Verlust der Leseposition, Fokusverwirrungen und seltsames Verhalten von Live-Region-Ankündigungen können ebenfalls auftreten, wenn der neue und der alte Inhalt gleichzeitig im DOM vorhanden sind.
• Dokumentenübergreifende Ansichtsübergänge (d.h. Navigationen 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 handhaben.

Das Erstellen eines Ansichtsübergangs, der die Standard-Übergangsanimationen des Browsers verwendet, ist sehr schnell durchzuführen, und es gibt Funktionen, die es Ihnen ermöglichen, sowohl die Übergangsanimation anzupassen als auch den Ansichtsübergang selbst zu manipulieren (zum Beispiel die Umstände anzugeben, unter denen die Animation übersprungen wird), für sowohl SPA- als auch MPA-Ansichtsübergänge.

Siehe Verwendung der View Transition API für mehr Informationen.

ViewTransition

Repräsentiert einen Ansichtsübergang und bietet Funktionalität, um auf das Erreichen verschiedener Zustände des Übergangs zu reagieren (z. B. bereit, die Animation auszuführen, oder Animation abgeschlossen) oder den Übergang vollständig zu überspringen.

Document.startViewTransition()

Startet einen neuen gleich-Dokument (SPA) Ansichtsübergang und gibt ein ViewTransition-Objekt zurück, um ihn darzustellen.

PageRevealEvent

Das Ereignisobjekt für das pagereveal-Ereignis. Während einer dokumentenübergreifenden Navigation erlaubt es Ihnen, den zugehörigen Ansichtsübergang zu manipulieren (indem auf das relevante ViewTransition-Objekt zugegriffen wird) aus dem Dokument heraus, 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 dokumentenübergreifenden Navigation erlaubt es Ihnen, den zugehörigen Ansichtsübergang zu manipulieren (indem auf das relevante ViewTransition-Objekt zugegriffen wird) aus dem Dokument heraus, von dem navigiert wird, falls ein Ansichtsübergang durch die Navigation ausgelöst wurde. Es bietet auch Zugriff auf Informationen über den Navigationstyp sowie die aktuellen und Ziel-Dokumenthistorieeinträge.

Das Window pagereveal-Ereignis

Wird ausgelöst, wenn ein Dokument erstmals gerendert wird, sei es 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 werden soll.

Identifiziert den kritischsten Inhalt im zugehörigen Dokument für die anfängliche Ansicht der Seite des Benutzers. Das Rendern des Dokuments wird blockiert, bis der kritische Inhalt analysiert wurde, um eine konsistente erste Darstellung — und daher einen Ansichtsübergang — in allen unterstützenden Browsern zu gewährleisten.

@view-transition

Im Falle einer dokumentenübergreifenden Navigation wird @view-transition verwendet, um das aktuelle und das Zieldokument dafür anzumelden, einen Ansichtsübergang zu durchlaufen.

view-transition-name

Gibt den Ansichtsübergang-Snapshot an, an dem ausgewählte Elemente teilnehmen, wodurch ein Element separat vom Rest der Seite während eines Ansichtsübergangs animiert werden kann.

view-transition-class

Bietet eine zusätzliche Methode zum Stylen ausgewählter Elemente, die einen view-transition-name haben.

::view-transition

Die Wurzel des Ansichtsübergangs-Overlays, das alle Ansichtsübergänge enthält und über dem restlichen Seiteninhalt liegt.

::view-transition-group()

Die Wurzel 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()

Ein statischer Schnappschuss der alten Ansicht, vor dem Übergang.

::view-transition-new()

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

• Grundlegende View Transitions SPA-Demo: Eine grundlegende Bildgalerie-Demo mit Ansichtsübergängen, die separate Animationen zwischen alten und neuen Bildern und alten und neuen Bildunterschriften bietet.
• Grundlegende View Transitions MPA-Demo: Eine beispielhafte Zwei-Seiten-Site, die die Verwendung von dokumentenübergreifenden (MPA) Ansichtsübergängen demonstriert und einen benutzerdefinierten "Nach-oben-wischen"-Übergang bietet, wenn zwischen den beiden Seiten navigiert wird.
• View Transitions match-element Demo: Eine SPA mit animierten Listenpunkten, die die Verwendung des Wertes match-element der Eigenschaft view-transition-name demonstriert.
• HTTP 203 Playlist: Eine Videoplayer-Demo-App, die mehrere verschiedene SPA-Ansichtsübergänge bietet, von denen viele in Smooth transitions with the View Transition API erklärt werden.
• Chrome DevRel View Transitions Demos: Eine Serie von View Transition API-Demos.

• 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 DebugBear (2024)