View Transition API

Die View Transition API bietet eine Methode, um einfach animierte Übergänge zwischen verschiedenen Website-Ansichten zu erstellen. Dies umfasst das Animieren zwischen DOM-Zuständen in einer Single-Page-App (SPA) sowie das Animieren der Navigation zwischen Dokumenten in einer Multi-Page-App (MPA).

Konzepte und Verwendung

Ansichtsübergänge sind eine beliebte Designentscheidung, um die kognitive Belastung der Benutzer zu reduzieren, ihnen dabei zu helfen, im Kontext zu bleiben, und die wahrgenommene Ladeverzögerung zu verringern, während sie zwischen Zuständen oder Ansichten einer Anwendung wechseln.

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

  • Übergänge zwischen Zuständen in Single-Page-Apps (SPAs) tendieren dazu, bedeutende Mengen an CSS und JavaScript zu erfordern, um:
    • Das Laden und Positionieren des alten und neuen Inhalts zu handhaben.
    • Die alten und neuen Zustände zu animieren, um den Übergang zu schaffen.
    • Unbeabsichtigte Benutzerinteraktionen mit dem alten Inhalt zu vermeiden, die Probleme verursachen könnten.
    • Den alten Inhalt zu entfernen, sobald der Übergang abgeschlossen ist. Barrierefreiheitsprobleme wie der Verlust der Leseposition, Fokusverwirrung und seltsames Verhalten bei Live-Region-Ankündigungen können ebenfalls auftreten, wenn neuer und alter Inhalt gleichzeitig im DOM vorhanden sind.
  • Dokumentübergreifende Ansichtsübergänge (d.h. bei 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 nutzt, ist sehr schnell möglich, und es gibt Funktionen, die es Ihnen ermöglichen, sowohl die Übergangsanimation anzupassen als auch den Ansichtsübergang selbst zu manipulieren (zum Beispiel Umstände festlegen, unter denen die Animation übersprungen wird), sowohl für SPA- als auch MPA-Ansichtsübergänge.

Siehe Using the View Transition API für weitere Informationen.

Schnittstellen

ViewTransition

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

Erweiterungen zu anderen Schnittstellen

Document.startViewTransition()

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

PageRevealEvent

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

PageSwapEvent

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

Das Window pagereveal Ereignis

Wird ausgelöst, wenn ein Dokument erstmals 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.

HTML-Ergänzungen

Identifiziert den wichtigsten Inhalt im zugehörigen Dokument für die anfängliche Ansicht der Seite des Benutzers. Die Dokumentdarstellung wird blockiert, bis der kritische Inhalt analysiert wurde, um ein konsistentes erstes Bild — und damit einen Ansichtsübergang — in allen unterstützenden Browsern sicherzustellen.

CSS-Ergänzungen

At-Regeln

@view-transition

Im Falle einer dokumentübergreifenden Navigation wird @view-transition verwendet, um sich für einen Ansichtsübergang des aktuellen und Ziel-Dokuments zu entscheiden.

Eigenschaften

view-transition-name

Gibt das Ansichtsübergang-Snapshot an, an dem ausgewählte Elemente teilnehmen werden, was es einem Element ermöglicht, während eines Ansichtsübergangs separat vom Rest der Seite animiert zu werden.

view-transition-class

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

Pseudo-Klassen

:active-view-transition

Passt auf Elemente, wenn ein Ansichtsübergang im Gange ist.

:active-view-transition-type()

Passt auf Elemente, wenn ein Ansichtsübergang eines bestimmten Typs im Gange ist.

Pseudo-Elemente

::view-transition

Die Wurzel der Ansichtsübergänge-Überlagerung, die alle Ansichtsübergänge enthält und über dem gesamten anderen Seiteninhalt sitzt.

::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()

Eine statische Momentaufnahme der alten Ansicht, vor dem Übergang.

::view-transition-new()

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

Beispiele

Spezifikationen

Specification
CSS View Transitions Module Level 1

Browser-Kompatibilität

api.Document.startViewTransition

css.at-rules.view-transition

Siehe auch