View Transition API

Die View Transition API bietet einen Mechanismus, mit dem sich animierte Übergänge zwischen verschiedenen Ansichten einer Website und ihrer Elemente einfach erstellen lassen. Dazu gehören Übergänge zwischen DOM-Zuständen in einer Single-Page-App (SPA) und Übergänge bei der Navigation zwischen Dokumenten in einer Multi-Page-App (MPA).

Konzepte und Verwendung

Animierte Ansichtsübergänge sind eine beliebte Gestaltungsmöglichkeit, um die kognitive Belastung der Nutzer zu verringern, ihnen die Orientierung zu erleichtern und die wahrgenommene Ladezeit beim Wechsel zwischen Zuständen oder Ansichten einer Anwendung zu verkürzen.

Bisher war es jedoch schwierig, solche Übergänge im Web zu erstellen:

Übergänge zwischen Zuständen in Single-Page-Apps (SPAs) erfordern häufig umfangreichen CSS- und JavaScript-Code, um:
- Das Laden und die Positionierung der alten und neuen Inhalte zu handhaben.
- Die alten und neuen Zustände zu animieren und so den Übergang zu erzeugen.
- Zu verhindern, dass unbeabsichtigte Interaktionen mit den alten Inhalten Probleme verursachen.
- Die alten Inhalte zu entfernen, sobald der Übergang abgeschlossen ist. Wenn alte und neue Inhalte gleichzeitig im DOM vorhanden sind, können außerdem Probleme mit der Barrierefreiheit auftreten, etwa der Verlust der Leseposition, Unklarheiten beim Fokus oder ungewöhnliche Ankündigungen durch Live-Regionen.
Ansichtsübergänge zwischen Dokumenten (also bei der Navigation zwischen verschiedenen Seiten einer MPA) waren bisher nicht möglich.

Die View Transition API bietet eine einfache Möglichkeit, die erforderlichen Ansichtswechsel und Übergangsanimationen für beide Anwendungsfälle umzusetzen.

Ein Ansichtsübergang mit den Standardanimationen des Browsers lässt sich sehr schnell erstellen. Darüber hinaus können Sie sowohl die Übergangsanimation anpassen als auch den Ansichtsübergang selbst steuern – beispielsweise festlegen, unter welchen Umständen die Animation übersprungen wird. Das gilt für Ansichtsübergänge in SPAs und MPAs.

Weitere Informationen finden Sie unter:

Schnittstellen

CSSViewTransitionRule: Repräsentiert eine @view-transition-At-Regel.
ViewTransition: Repräsentiert einen Ansichtsübergang und bietet Funktionen, um auf verschiedene Zustände des Übergangs zu reagieren (z. B. wenn die Animation ausgeführt werden kann oder abgeschlossen ist) oder den Übergang vollständig zu überspringen.
ViewTransitionTypeSet: Ein Set-ähnliches Objekt, das die Typen eines aktiven Ansichtsübergangs repräsentiert. Damit lassen sich die Typen während des Übergangs abfragen oder ändern.

Erweiterungen anderer Schnittstellen

Document.startViewTransition(): Startet einen neuen Ansichtsübergang innerhalb desselben Dokuments (SPA) und gibt ein ViewTransition-Objekt zurück, das ihn repräsentiert.
PageRevealEvent: Das Ereignisobjekt für das Ereignis pagereveal. Bei einer Navigation zwischen Dokumenten können Sie damit den zugehörigen Ansichtsübergang vom Zieldokument aus steuern. Dazu erhalten Sie Zugriff auf das entsprechende ViewTransition-Objekt, sofern die Navigation einen Ansichtsübergang ausgelöst hat.
PageSwapEvent: Das Ereignisobjekt für das Ereignis pageswap. Bei einer Navigation zwischen Dokumenten können Sie damit den zugehörigen Ansichtsübergang vom Ausgangsdokument aus steuern. Dazu erhalten Sie Zugriff auf das entsprechende ViewTransition-Objekt, sofern die Navigation einen Ansichtsübergang ausgelöst hat. Außerdem stellt es Informationen über die Art der Navigation sowie über die Einträge des aktuellen Dokuments und des Zieldokuments im Verlauf bereit.
Das Window-Ereignis pagereveal: Wird ausgelöst, wenn ein Dokument erstmals gerendert wird – entweder beim Laden eines neuen Dokuments aus dem Netzwerk oder beim Aktivieren eines Dokuments aus dem Back/Forward-Cache (bfcache) oder einem Prerender.
Das Window-Ereignis pageswap: Wird ausgelöst, wenn ein Dokument aufgrund einer Navigation unmittelbar entladen werden soll.

HTML-Ergänzungen

<link rel="expect">: Kennzeichnet die wichtigsten Inhalte im zugehörigen Dokument für die erste Ansicht der Seite. Das Rendern des Dokuments wird blockiert, bis diese Inhalte geparst wurden. So wird in allen unterstützenden Browsern eine konsistente erste Darstellung und damit ein konsistenter Ansichtsübergang gewährleistet.

CSS-Ergänzungen

At-Regeln

@view-transition: Bei einer Navigation zwischen Dokumenten wird @view-transition verwendet, um Ansichtsübergänge für das aktuelle Dokument und das Zieldokument zu aktivieren.

Eigenschaften

view-transition-name: Gibt den Snapshot des Ansichtsübergangs an, an dem ausgewählte Elemente teilnehmen. Dadurch kann ein Element während eines Ansichtsübergangs unabhängig vom Rest der Seite animiert werden.
view-transition-class: Bietet eine zusätzliche Möglichkeit, ausgewählte Elemente mit einem view-transition-name zu gestalten.
view-transition-scope: Ermöglicht es, die Erkennung von Elementen mit festgelegten view-transition-name-Werten und damit die Erstellung von Snapshots für Ansichtsübergänge auf einen bestimmten Element-Unterbaum zu beschränken.

Pseudoklassen

:active-view-transition: Trifft auf Elemente zu, während ein Ansichtsübergang läuft.
:active-view-transition-type(): Trifft auf Elemente zu, während ein Ansichtsübergang mit einem oder mehreren bestimmten Typen läuft.

Pseudoelemente

::view-transition: Das Wurzelelement der Ebene für Ansichtsübergänge. Es enthält alle Ansichtsübergänge und liegt über allen anderen Seiteninhalten.
::view-transition-group(): Das Wurzelelement eines einzelnen Ansichtsübergangs.
::view-transition-image-pair(): Der Container für die alte und die neue Ansicht eines Ansichtsübergangs – vor und nach dem Übergang.
::view-transition-old(): Ein statischer Snapshot der alten Ansicht vor dem Übergang.
::view-transition-new(): Eine Live-Darstellung der neuen Ansicht nach dem Übergang.

Beispiele

Grundlegende SPA-Demo für Ansichtsübergänge: Eine einfache Bildergalerie mit Ansichtsübergängen, die separate Animationen zwischen alten und neuen Bildern sowie alten und neuen Bildunterschriften zeigt.
Grundlegende MPA-Demo für Ansichtsübergänge: Eine Beispielwebsite mit zwei Seiten, die Ansichtsübergänge zwischen Dokumenten (MPA) demonstriert. Bei der Navigation zwischen den beiden Seiten verwendet sie einen benutzerdefinierten Übergang, bei dem die Ansicht nach oben geschoben wird.
Demo für Ansichtsübergänge mit match-element: Eine SPA mit animierten Listeneinträgen. Sie zeigt, wie sich mit dem Wert match-element der Eigenschaft view-transition-name einzelne Elemente animieren lassen.
HTTP 203-Playlist: Eine Demo-App für einen Videoplayer mit mehreren verschiedenen SPA-Ansichtsübergängen. Viele davon werden in Fließende Übergänge mit der View Transition API erläutert.
Chrome-DevRel-Demos für Ansichtsübergänge: Eine Reihe von Demos zur View Transition API.

Spezifikationen

Spezifikation
CSS View Transitions Module Level 2
CSS View Transitions Module Level 1

Fließende Übergänge mit der View Transition API auf developer.chrome.com (2024)
View Transitions API: Single-Page-Apps ohne Framework auf DebugBear (2024)
Gleichzeitige und verschachtelte Ansichtsübergänge mit elementbezogenen Ansichtsübergängen ausführen auf developer.chrome.com

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden