View Transition API

View-Übergänge sind eine beliebte Designwahl, um die kognitive Belastung der Benutzer zu reduzieren, ihnen zu helfen, den Kontext zu behalten, und die wahrgenommene Ladezeit zu verringern, während sie sich zwischen Zuständen oder Ansichten einer Anwendung bewegen.

Allerdings war das Erstellen von View-Übergängen im Web historisch gesehen schwierig:

• Übergänge zwischen Zuständen in Single-Page-Apps (SPAs) umfassen in der Regel das Schreiben erheblicher Mengen an CSS und JavaScript, um:
  • Das Laden und Positionieren des alten und neuen Inhalts zu handhaben.
  • Die alten und neuen Zustände zu animieren, um den Übergang zu erzeugen.
  • 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 beim Fokus und seltsames Verhalten bei der Ankündigung von Live-Bereichen können auch auftreten, wenn der neue und alte Inhalt gleichzeitig im DOM vorhanden sind.
• Übergänge zwischen Dokumenten über verschiedene Seiten in MPAs hinweg waren bisher unmöglich.

Die View Transition API liefert eine einfache Möglichkeit, die erforderlichen View-Änderungen und Übergangsanimationen für beide oben genannten Anwendungsfälle zu handhaben.

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

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

ViewTransition

Repräsentiert einen View-Übergang und bietet Funktionen, um auf den Übergang zu reagieren, wenn er verschiedene Zustände erreicht (z. B. bereit für die Animation oder Animation abgeschlossen) oder den Übergang vollständig zu überspringen.

Document.startViewTransition()

Startet einen neuen Spa-View-Übergang im selben Dokument und gibt ein ViewTransition-Objekt zurück, um ihn darzustellen.

PageRevealEvent

Das Ereignisobjekt für das pagereveal-Ereignis. Während einer cross-document Navigation ermöglicht es Ihnen, den zugehörigen View-Übergang zu manipulieren (wobei Sie Zugriff auf das relevante ViewTransition-Objekt erhalten) von dem Dokument aus, zu dem navigiert wird, wenn ein View-Übergang durch die Navigation ausgelöst wurde.

PageSwapEvent

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

Das Window pagereveal-Ereignis

Wird ausgelöst, wenn ein Dokument zum ersten Mal gerendert 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 werden soll.

<link rel="expect">

Identifiziert den wichtigsten Inhalt im zugehörigen Dokument für die anfängliche Ansicht der Seite des Benutzers. Die Dokumentenwiedergabe wird blockiert, bis der kritische Inhalt analysiert wurde, um ein konsistentes erstes Rendering — und damit einen einheitlichen View-Übergang — über alle unterstützenden Browser hinweg zu gewährleisten.

@view-transition

Im Fall einer cross-document Navigation wird @view-transition verwendet, um die aktuellen und Ziel-Dokumente dazu zu bringen, einen View-Übergang zu durchlaufen.

view-transition-name

Verleiht dem ausgewählten Element einen separaten Identifikationsnamen und führt dazu, dass es an einem separaten View-Übergang vom Root-View-Übergang teilnimmt — oder an keinem View-Übergang, wenn der Wert none angegeben ist.

::view-transition

Der Ursprung des View-Transition-Overlays, das alle View-Übergänge enthält und über allen anderen Seiteninhalten liegt.

::view-transition-group()

Der Ursprung eines einzelnen View-Übergangs.

::view-transition-image-pair()

Der Container für die alten und neuen Ansichten eines View-Ü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.

• Basis-View-Übergänge SPA-Demo: Eine grundlegende Bildergalerie-Demo mit View-Übergängen, die separate Animationen zwischen alten und neuen Bildern sowie alten und neuen Bildunterschriften aufweist.
• Basis-View-Übergänge MPA-Demo: Eine Beispielseite mit zwei Seiten, die die Nutzung von cross-document (MPA) View-Übergängen zeigt und einen benutzerdefinierten "Swipe-Up"-Übergang bietet, wenn zwischen den beiden Seiten navigiert wird.
• HTTP 203 Wiedergabeliste: Eine Video-Player-Demo-App, die mehrere verschiedene SPA View-Übergänge bietet, von denen viele in Smooth transitions with the View Transition API erklärt werden.
• Liste der Chrome DevRel Teammitglieder: Eine grundlegende App für Teamprofilseiten, die zeigt, wie man die pagereveal- und pageswap-Ereignisse verwendet, um die ausgehenden und eingehenden Animationen eines cross-document View-Übergangs basierend auf den "from" und "to" 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 DebugBear (2024)