View Transition API

Konzepte und Nutzung

View-bergnge sind eine beliebte Designwahl, um die kognitive Belastung der Benutzer zu verringern, ihnen zu helfen, im Kontext zu bleiben, und die wahrgenommene Ladezeit zu reduzieren, whrend sie zwischen Zustnden oder Ansichten einer Anwendung wechseln.

Allerdings war das Erstellen von View-bergngen im Web historisch schwierig:

• bergnge zwischen Zustnden in Single-Page-Apps (SPAs) erfordern in der Regel das Schreiben von erheblichem CSS und JavaScript, um:
  • Das Laden und Positionieren der alten und neuen Inhalte zu behandeln.
  • Die alten und neuen Zustnde zu animieren, um den bergang zu schaffen.
  • Zu verhindern, dass versehentliche Benutzerinteraktionen mit den alten Inhalten Probleme verursachen.
  • Die alten Inhalte zu entfernen, sobald der bergang abgeschlossen ist. Barrierefreiheitsprobleme wie der Verlust der Leseposition, Verwirrung bei der Fokussierung und seltsames Verhalten bei Live-Bereichsansagen knnen auch auftreten, wenn sowohl die neuen als auch die alten Inhalte gleichzeitig im DOM vorhanden sind.
• bergnge ber Dokumente hinweg (d.h. bei Navigationen zwischen verschiedenen Seiten in MPAs) waren historisch gesehen unmglich.

Die View Transition API bietet eine einfache Mglichkeit, die erforderlichen Ansichtsnderungen und bergangsanimationen fr beide Anwendungsflle zu handhaben.

Das Erstellen eines Ansichtsbergangs, der die Standardbergangsanimationen des Browsers verwendet, ist sehr schnell durchzufhren, und es gibt Funktionen, die es Ihnen ermglichen, sowohl die bergangsanimation als auch den Ansichtsbergang selbst anzupassen und zu manipulieren (zum Beispiel Umstnde zu spezifizieren, unter denen die Animation bersprungen wird) fr sowohl SPA- als auch MPA-Ansichtsbergnge.

Weitere Informationen finden Sie unter:

• Verwendung der View Transition API
• Verwendung von View-bergangstypen
• Verwendung von elementbezogenen View-bergngen

Schnittstellen

CSSViewTransitionRule

Reprsentiert eine @view-transition At-Regel.

ViewTransition

Reprsentiert einen Ansichtsbergang und bietet Funktionalitt, um auf das Erreichen verschiedener Zustnde des bergangs zu reagieren (z. B. bereit, die Animation auszufhren oder die Animation abzuschlieen) oder den bergang ganz zu berspringen.

ViewTransitionTypeSet

Ein mengenhnliches Objekt, das die Typen eines aktiven Ansichtsbergangs darstellt, wodurch die Typen whrend eines bergangs dynamisch abgefragt oder modifiziert werden knnen.

Erweiterungen zu anderen Schnittstellen

Document.startViewTransition()

Startet einen neuen gleichseitigen (SPA) Ansichtsbergang und gibt ein ViewTransition Objekt zurck, um ihn darzustellen.

PageRevealEvent

Das Ereignisobjekt fr das pagereveal Ereignis. Whrend einer cross-Dokument-Navigation, ermglicht es Ihnen, den zugehrigen Ansichtsbergang (und gewhrt Zugriff auf das relevante ViewTransition Objekt) von dem Dokument aus zu manipulieren, zu dem navigiert wird, wenn ein Ansichtsbergang durch die Navigation ausgelst wurde.

PageSwapEvent

Das Ereignisobjekt fr das pageswap Ereignis. Whrend einer cross-Dokument-Navigation, ermglicht es Ihnen, den zugehrigen Ansichtsbergang (und gewhrt Zugriff auf das relevante ViewTransition Objekt) von dem Dokument aus zu manipulieren, von dem aus navigiert wird, wenn ein Ansichtsbergang durch die Navigation ausgelst wurde. Es bietet auch Zugriff auf Informationen ber den Navigationstyp und die aktuellen sowie die Ziel-Dokumenthistory-Eintrge.

Das Window pagereveal Ereignis

Wird ausgelst, wenn ein Dokument zum ersten Mal gerendert wird, entweder beim Laden eines frischen Dokuments aus dem Netzwerk oder durch Aktivierung eines Dokuments (entweder aus dem Back/Forward Cache (bfcache) oder prerender).

Das Window pageswap Ereignis

Wird ausgelst, wenn ein Dokument aufgrund einer Navigation entladen werden soll.

HTML-Erweiterungen

<link rel="expect">

Identifiziert den wichtigsten Inhalt im zugehrigen Dokument fr die erste Ansicht der Seite durch den Benutzer. Das Rendern des Dokuments wird blockiert, bis der wichtige Inhalt analysiert wurde, um einen konsistenten ersten Anstrich und daher einen Ansichtsbergang in allen untersttzenden Browsern zu gewhrleisten.

CSS-Erweiterungen

At-Regeln

@view-transition

Im Falle einer cross-Dokument-Navigation wird @view-transition verwendet, um das aktuelle und das Zieldokument fr einen Ansichtsbergang zu aktivieren.

Eigenschaften

view-transition-name

Gibt das Ansichtsbergangs-Snapshot an, an dem die ausgewhlten Elemente teilnehmen werden, was es einem Element ermglicht, whrend eines Ansichtsbergangs separat vom Rest der Seite animiert zu werden.

view-transition-class

Bietet eine zustzliche Methode zum Styling ausgewhlter Elemente, die einen view-transition-name haben.

view-transition-scope

Ermglicht die Auffindbarkeit von Elementen mit festgelegten view-transition-name-Werten (und damit die Erstellung von Ansichtsbergangs-Snapshots), um auf ein bestimmtes Element-Teilbaum isoliert zu werden.

Pseudoklassen

:active-view-transition

Entspricht den Elementen, wenn ein Ansichtsbergang in Bearbeitung ist.

:active-view-transition-type()

Entspricht den Elementen, wenn ein Ansichtsbergang mit einem oder mehreren spezifischen Typen in Bearbeitung ist.

Pseudoelemente

::view-transition

Die Wurzel des Ansichtsbergangs-Overlays, das alle Ansichtsbergnge enthlt und ber allen anderen Seiteninhalten liegt.

::view-transition-group()

Die Wurzel eines einzelnen Ansichtsbergangs.

::view-transition-image-pair()

Der Container fr alte und neue Ansichten eines Ansichtsbergangs vor und nach dem bergang.

::view-transition-old()

Ein statisches Snapshot der alten Ansicht, vor dem bergang.

::view-transition-new()

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

Beispiele

• Grundlegende View Transitions SPA-Demo: Ein grundlegendes Bildergalerie-Demo mit Ansichtsbergngen, das separate Animationen zwischen alten und neuen Bildern sowie alten und neuen Beschriftungen zeigt.
• Grundlegende View Transitions MPA-Demo: Ein Beispiel fr eine zweiseitige Website, die die Nutzung von cross-Dokument (MPA) Ansichtsbergngen demonstriert und einen benutzerdefinierten "Swipe-up"-bergang bietet, wenn zwischen den beiden Seiten navigiert wird.
• View transitions match-element Demo: Eine SPA mit animierten Listenelementen, die die Verwendung des match-element Werts der view-transition-name-Eigenschaft zeigt, um einzelne Elemente zu animieren.
• HTTP 203 Playlist: Eine Videoplayer-Demo-App, die mehrere verschiedene SPA-Ansichtsbergnge bietet, von denen viele in Sanfte bergnge mit der View Transition API erklrt werden.
• Chrome DevRel View Transitions Demos: Eine Reihe von Demos der View Transition API.

Spezifikationen

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

Browser-Kompatibilitt

api.Document.startViewTransition

css.at-rules.view-transition

Siehe auch

• Sanfte bergnge mit der 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)
• Run concurrent and nested view transitions with element-scoped view transitions auf developer.chrome.com