View Transitions API

Ansichtsübergänge sind eine populäre Designwahl, um die kognitive Belastung der Benutzer zu reduzieren, ihnen zu helfen, den Kontext beizubehalten, und die wahrgenommene Ladezeit zu verkürzen, wenn sie zwischen Zuständen oder Ansichten einer Anwendung wechseln.

Das Erstellen von Ansichtsübergängen im Web war jedoch historisch schwierig:

• Übergänge zwischen Zuständen in Single-Page-Apps (SPAs) erfordern in der Regel das Schreiben von erheblichem CSS und JavaScript, um:
  • Das Laden und Positionieren des alten und neuen Inhalts zu handhaben.
  • Den Übergang der alten und neuen Zustände zu animieren.
  • Zu verhindern, dass unbeabsichtigte Benutzerinteraktionen mit dem alten Inhalt Probleme verursachen.
  • Den alten Inhalt zu entfernen, sobald der Übergang abgeschlossen ist. Zugänglichkeitsprobleme wie der Verlust der Leseposition, Verwirrung des Fokus und seltsames Verhalten der Live-Region-Ankündigung können auch daraus resultieren, dass der neue und alte Inhalt gleichzeitig im DOM vorhanden sind.
• Dokumentübergreifende Ansichtsübergänge (d.h. über die Navigation zwischen verschiedenen Seiten in MPAs) waren historisch unmöglich.

Die View Transitions 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 zu bewerkstelligen, und es gibt Funktionen, die es Ihnen ermöglichen, sowohl die Übergangsanimation anzupassen als auch den Ansichtsübergang selbst zu manipulieren (z.B. Umstände anzugeben, unter denen die Animation übersprungen wird), sowohl für SPA- als auch MPA-Ansichtsübergänge.

Weitere Informationen finden Sie unter Using the View Transitions API.

ViewTransition

Repräsentiert einen Ansichtsübergang und bietet Funktionalitäten, um auf den Übergang in verschiedenen Zuständen zu reagieren (z.B. bereit für die Ausführung der Animation oder die Animation ist beendet) oder den Übergang ganz zu überspringen.

Document.startViewTransition()

Startet einen neuen Dokument-internen (SPA) Ansichtsübergang und gibt ein ViewTransition-Objekt zurück, um es zu repräsentieren.

PageRevealEvent

Das Ereignisobjekt für das pagereveal-Ereignis. Bei einer dokumentübergreifenden Navigation ermöglicht es Ihnen, den zugehörigen Ansichtsübergang zu manipulieren (und Zugriff auf das relevante ViewTransition-Objekt) von dem Dokument aus zu erhalten, auf das navigiert wird, wenn ein Ansichtsübergang durch die Navigation ausgelöst wurde.

PageSwapEvent

Das Ereignisobjekt für das pageswap-Ereignis. Bei einer dokumentübergreifenden Navigation ermöglicht es Ihnen, den zugehörigen Ansichtsübergang zu manipulieren (und Zugriff auf das relevante ViewTransition-Objekt) von dem Dokument aus zu erhalten, von dem aus navigiert wird, wenn ein Ansichtsübergang durch die Navigation ausgelöst wurde. Es bietet auch Zugriff auf Informationen über den Navigationstyp und die aktuellen und Ziel-Dokumentverläufseinträ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 wird.

<link rel="expect">

Identifiziert den kritischsten Inhalt im zugehörigen Dokument für die Erstansicht der Seite durch den Benutzer. Das Rendern des Dokuments wird blockiert, bis der kritische Inhalt analysiert wurde, wodurch ein konsistentes erstes Rendering - und somit Ansichtsübergang - in allen unterstützenden Browsern sichergestellt wird.

@view-transition

Bei einer dokumentübergreifenden Navigation wird @view-transition verwendet, um das aktuelle und das Ziel-Dokument in einen Ansichtsübergang einzubinden.

view-transition-name

Verleiht dem ausgewählten Element einen separaten identifizierenden Namen und lässt es an einem separaten Ansichtsübergang vom Root-Ansichtsübergang teilnehmen — oder keinem Ansichtsübergang, wenn der Wert none angegeben ist.

::view-transition

Der Ursprung der Ansichtsübergangs-Überlagerung, die alle Ansichtsübergänge enthält und über allen anderen Seitenelementen liegt.

::view-transition-group()

Der Ursprung 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 statisches Abbild der alten Ansicht vor dem Übergang.

::view-transition-new()

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

• Basis-Ansichtsübergänge SPA-Demo: Eine grundlegende Bildergalerie-Demo mit Ansichtsübergängen, die separate Animationen zwischen alten und neuen Bildern sowie alten und neuen Unterschriften bietet.
• Basis-Ansichtsübergänge MPA-Demo: Eine Beispielseite mit zwei Seiten, die die Verwendung von dokumentübergreifenden (MPA) Ansichtsübergängen demonstriert und einen benutzerdefinierten "Hochwischen"-Übergang bietet, wenn zwischen den beiden Seiten navigiert wird.
• HTTP 203 Wiedergabeliste: Eine Videoplayer-Demo-App, die mehrere verschiedene SPA-Ansichtsübergänge enthält, von denen viele in Smooth and simple transitions with the View Transitions API erklärt werden.
• Liste der Chrome DevRel Teammitglieder: Eine grundlegende Teamprofilseiten-App, die zeigt, wie die pagereveal und pageswap Ereignisse verwendet werden, um die ausgehende und eingehende Animation eines dokumentübergreifenden Ansichtsübergangs basierend auf den "von"- und "zu"-URLs anzupassen.

• Smooth and simple transitions with the View Transitions API
• View Transitions API: Creating Smooth Page Transitions