View Transition API

Konzepte und Verwendung

Ansichtsübergänge sind eine beliebte Designwahl, um die kognitive Belastung der Nutzer zu reduzieren, ihnen zu helfen, im Kontext zu bleiben, und die wahrgenommene Ladezeit zu verkürzen, während sie zwischen Zuständen oder Ansichten einer Anwendung wechseln.

Jedoch war es historisch gesehen schwierig, Ansichtsübergänge im Web zu erstellen:

• Übergänge zwischen Zuständen in Single-Page-Anwendungen (SPAs) erforderten oft signifikanten CSS- und JavaScript-Aufwand, um:
  • Das Laden und Positionieren der alten und neuen Inhalte zu verwalten.
  • Die alten und neuen Zustände zu animieren, um den Übergang zu schaffen.
  • Unbeabsichtigte Benutzerinteraktionen mit dem alten Inhalt zu verhindern, die Probleme verursachen könnten.
  • Den alten Inhalt zu entfernen, sobald der Übergang abgeschlossen ist. Zugänglichkeitsprobleme wie der Verlust der Leseposition, Fokusverwirrung und seltsames Verhalten bei Ankündigungen in Live-Bereichen können ebenfalls entstehen, wenn sowohl der neue als auch der alte Inhalt gleichzeitig im DOM präsent sind.
• Dokumentübergreifende Ansichtsübergänge (d.h. über Navigationsvorgänge zwischen verschiedenen Seiten in MPAs) waren historisch nicht mö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.

Einen Ansichtsübergang zu erstellen, der die Standard-Übergangsanimationen des Browsers verwendet, ist sehr schnell durchzuführen, und es gibt Funktionen, die es ermöglichen, sowohl die Übergangsanimation anzupassen als auch den Ansichtsübergang selbst zu beeinflussen (zum Beispiel Umstände festzulegen, unter denen die Animation übersprungen wird), sowohl für SPA- als auch MPA-Ansichtsübergänge.

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

Schnittstellen

CSSViewTransitionRule

Repräsentiert eine @view-transition at-rule.

ViewTransition

Repräsentiert einen Ansichtsübergang und bietet Funktionalität, um auf das Erreichen verschiedener Übergangszustände zu reagieren (z. B. bereit zum Starten der Animation oder Animation abgeschlossen) oder den Übergang ganz zu überspringen.

ViewTransitionTypeSet

Ein mengenartiges Objekt, das die Typen eines aktiven Ansichtsübergangs repräsentiert, wodurch die Typen während eines Übergangs in Echtzeit abgefragt oder modifiziert werden können.

Erweiterungen zu anderen Schnittstellen

Document.startViewTransition()

Startet einen neuen dokumentinternen (SPA) Ansichtsübergang und gibt ein ViewTransition-Objekt zurück, das ihn repräsentiert.

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 (indem der Zugriff auf das relevante ViewTransition Objekt bereitgestellt wird) aus dem Dokument, zu dem navigiert wird, wenn ein Ansichtsübergang von der 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 (indem der Zugriff auf das relevante ViewTransition Objekt bereitgestellt wird) aus dem Dokument, von dem aus navigiert wird, wenn ein Ansichtsübergang von der Navigation ausgelöst wurde. Es bietet auch Zugriff auf Informationen über den Navigationstyp und die aktuellen sowie die Zieldokument-Verlaufeinträge.

Das Window pagereveal Ereignis

Wird ausgelöst, wenn ein Dokument erstmals gerendert wird, entweder beim Laden eines frischen Dokuments aus dem Netzwerk oder bei der Aktivierung 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.

HTML-Ergänzungen

<link rel="expect">

Identifiziert den kritischsten Inhalt im zugehörigen Dokument für die anfängliche Ansicht der Seite für den Benutzer. Das Rendern des Dokuments wird blockiert, bis der kritische Inhalt analysiert wurde, was ein konsistentes erstes Rendering — und folglich einen Ansichtsübergang — über alle unterstützten Browser hinweg sicherstellt.

CSS-Ergänzungen

At-rules

@view-transition

Im Falle einer dokumentübergreifenden Navigation wird @view-transition verwendet, um das aktuelle und das Zieldokument in einen Ansichtsübergang einzubeziehen.

Eigenschaften

view-transition-name

Gibt den Ansichtsübergangs-Snapshot an, an dem ausgewählte Elemente teilnehmen werden, was es ermöglicht, dass ein Element während eines Ansichtsübergangs unabhängig vom Rest der Seite animiert wird.

view-transition-class

Bietet eine zusätzliche Methode zum Stylen von ausgewählten Elementen, 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 mit einem oder mehreren spezifischen Typen im Gange ist.

Pseudo-Elemente

::view-transition

Der Ursprung der Ansichtsübergangsüberlagerung, die alle Ansichtsübergänge enthält und über allen anderen Seiteninhalten sitzt.

::view-transition-group()

Der Ursprung eines einzigen 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

• Grundlegende Ansichtsübergänge SPA-Demo: Eine einfache Bildergalerie-Demo mit Ansichtsübergängen, die separate Animationen zwischen alten und neuen Bildern sowie alten und neuen Bildunterschriften zeigt.
• Grundlegende Ansichtsübergänge MPA-Demo: Eine Beispielseite mit zwei Seiten, die die Verwendung von dokumentübergreifenden (MPA) Ansichtsübergängen demonstriert und einen benutzerdefinierten "Swipe up"-Übergang bietet, wenn zwischen den beiden Seiten navigiert wird.
• Ansichtsübergänge match-element-Demo: Eine SPA mit animierten Listenelementen, die die Verwendung des match-element-Werts der view-transition-name-Eigenschaft zur Animation individueller Elemente demonstriert.
• HTTP 203-Playlist: Eine Videoplayer-Demo-Anwendung, die mehrere verschiedene SPA-Ansichtsübergänge beinhaltet, von denen viele in Fließende Übergänge mit der View Transition API erklärt werden.
• Chrome DevRel Ansichtsübergänge-Demos: Eine Serie von View Transition API-Demos.

Spezifikationen

Browser-Kompatibilität

api.Document.startViewTransition

css.at-rules.view-transition

Siehe auch

• Fließende Übergänge mit der View Transition API auf developer.chrome.com (2024)
• View Transition API: Erstellung fließender Seitenübergänge auf stackdiary.com (2023)
• View Transitions API: Single Page Apps ohne Framework auf DebugBear (2024)