View Transitions API: Live-Beispiele für SPA und Multi-Page | We.Inc
Funktionierende Beispiele für die View Transitions API: startViewTransition in einer Liste, die du mischen kannst, benannte Elemente, die sich verwandeln, @view-transition zwischen Seiten, Typen, React und Browser-Support.
View Transitions API: Beispiele
Die View Transitions API animiert den Wechsel zwischen zwei Zuständen einer Seite. In einer Single-Page-App packst du das DOM-Update in document.startViewTransition(() => update()). Zwischen Seiten derselben Origin fügst du auf beiden Seiten @view-transition { navigation: auto; } hinzu. Gib einem Element einen eindeutigen view-transition-name, und der Browser verwandelt es von seiner alten Position in seine neue.
Zwei Arten von View Transitions
Im selben Dokument (SPA)
Zwischen Dokumenten (MPA)
Wie du sie startest
document.startViewTransition()
@view-transition { navigation: auto; } auf beiden Seiten
Chrome und Edge
ab 111
ab 126
Safari
ab 18
ab 18.2
Firefox
ab 144
Noch nicht unterstützt
Baseline
Neu verfügbar (Oktober 2025)
Nicht Baseline
Die meisten Erklärungen zu View Transitions beschreiben den Baum der Pseudo-Elemente und hören dann auf. Diese Seite beginnt mit einer funktionierenden Demo in deinem Browser: Mische ein Raster, öffne eine Karte in eine Detailansicht und sieh zu, wie sich benannte Elemente bewegen. Danach bekommst du den Code für jedes Muster, das Setup zwischen Seiten und die Fallbacks für Browser ohne Support.
Drücke Mischen, um das Raster neu anzuordnen. Jede Kachel hat ihren eigenen view-transition-name, deshalb gleitet jede an ihren neuen Platz.
Klicke auf eine Kachel, um sie zu öffnen. Der Farbblock und der Titel verwandeln sich in die Detailansicht, weil sie dieselben Namen tragen.
Fehlt deinem Browser die API, aktualisiert sich die Demo trotzdem sofort und sagt dir Bescheid.
Kopiere die Snippets unten für reines JavaScript, React und Multi-Page-Websites.
Jeder view-transition-name auf der Seite muss zum Zeitpunkt des Snapshots eindeutig sein. Ein Duplikat lässt das ready-Promise fehlschlagen, und die Transition wird übersprungen.
Verwende view-transition-name: match-element in einer Transition im selben Dokument, um jeden Eintrag einer Liste automatisch zu benennen.
Lade Daten, bevor du startViewTransition aufrufst. Das Rendering ist eingefroren, solange der Update-Callback läuft, ein langsamer Callback wirkt also wie ein Hänger.
Prüfe vor dem Aufruf, ob document.startViewTransition existiert, und führe das Update einfach direkt aus, wenn es fehlt.
Reduziere die Animationen in einer prefers-reduced-motion: reduce-Abfrage, die Zustandsänderung passiert trotzdem.
Häufige Fragen
Was macht document.startViewTransition?
Es erstellt einen Snapshot der aktuellen Seite, führt deinen Update-Callback aus und animiert dann vom alten Snapshot zum neuen Live-Zustand. Es gibt ein ViewTransition-Objekt mit den Promises ready, finished und updateCallbackDone sowie einer Methode skipTransition() zurück.
Wie füge ich View Transitions zwischen Seiten hinzu?
Setze @view-transition { navigation: auto; } in das CSS sowohl der Seite, die du verlässt, als auch der Seite, auf der du ankommst. Die Seiten müssen dieselbe Origin haben, und standardmäßig bekommst du eine Überblendung. Gib passenden Elementen auf beiden Seiten denselben view-transition-name, damit sie sich verwandeln.
Funktionieren View Transitions in Firefox?
Transitions im selben Dokument funktionieren ab Firefox 144. Transitions zwischen Dokumenten wurden von Firefox zum Zeitpunkt des Schreibens nicht unterstützt, in diesen Browsern findet die Navigation also einfach ohne Animation statt.
Wie nutze ich View Transitions in React?
Rufe document.startViewTransition auf und aktualisiere den State innerhalb von flushSync aus react-dom, damit React das neue DOM synchron schreibt, bevor der Browser den neuen Snapshot erstellt.
Wie passe ich die Animation an?
Style die Pseudo-Elemente. ::view-transition-old(name) ist der ausgehende Snapshot und ::view-transition-new(name) der eingehende, und ::view-transition-group(name) steuert Größe und Position. Verwende root als Namen für die ganze Seite.
Was während einer Transition passiert
Der Browser erfasst den aktuellen Zustand als Bilder, eins für die Seite und eins für jedes benannte Element. Er führt dein Update aus, während das Rendering pausiert, und erfasst dann den neuen Zustand.
Er baut über der Seite einen Baum aus Pseudo-Elementen: eine Gruppe pro Name, die ein altes und ein neues Bild enthält. Standardmäßig animiert die Gruppe Größe und Position, während die beiden Bilder ineinander überblenden, und genau das erzeugt die Verwandlung.
Elemente gut benennen
Ein Name verbindet ein Element im alten Zustand mit einem im neuen Zustand. Ein Produktfoto in einer Liste und das große Foto auf seiner Detailseite können sich einen Namen wie product-42 teilen, und der Browser animiert das eine in das andere.
Setze den Namen nur dort, wo er gebraucht wird. Auch ein benanntes Element, das sich nicht ändert, kostet einen eigenen Snapshot.
Typen für verschiedene Richtungen
startViewTransition akzeptiert auch ein Options-Objekt mit einer update-Funktion und einem types-Array. Ein Typ wie forwards oder backwards lässt sich dann in CSS mit dem Selektor :active-view-transition-type() abfragen, sodass das Zurückgehen in die andere Richtung gleitet.
Bei Navigationen zwischen Seiten legt der Deskriptor types innerhalb von @view-transition die Typen auf dieselbe Weise fest.
Transitions im selben Dokument
startViewTransition mit Feature-Erkennung
Browser ohne die API führen das Update sofort aus, es geht also nichts kaputt.
Ein Thumbnail in ein Hero-Bild verwandeln
Nur ein Element darf den Namen gleichzeitig tragen, setze ihn deshalb erst kurz vor der Transition auf das angeklickte Thumbnail.
React
startViewTransition mit flushSync
flushSync sorgt dafür, dass React das neue DOM innerhalb des Callbacks übernimmt.
Transitions zwischen Dokumenten
Zwischen den Seiten einer Multi-Page-Website gleiten
Füge das in das Stylesheet jeder Seite ein, die mitmachen soll. Nur innerhalb derselben Origin.
API-Referenz
Die Bausteine der View Transitions API
Name
Art
Was es macht
document.startViewTransition(update)
Methode
Startet eine Transition im selben Dokument und gibt eine ViewTransition zurück
ViewTransition.ready
Promise
Wird erfüllt, wenn die Pseudo-Elemente existieren und die Animation gleich beginnt
ViewTransition.finished
Promise
Wird erfüllt, wenn die Animation endet und der neue Zustand live ist
ViewTransition.updateCallbackDone
Promise
Wird erfüllt, wenn dein Update-Callback fertig ist
ViewTransition.skipTransition()
Methode
Überspringt die Animation, das Update läuft trotzdem
CSS-Eigenschaft
Gibt einem Element einen eigenen Snapshot zum Verwandeln
@view-transition
CSS-At-Regel
Aktiviert für eine Seite Transitions zwischen Dokumenten
::view-transition-old() / -new()
Pseudo-Elemente
Die ausgehenden und eingehenden Snapshots
::view-transition-group()
Pseudo-Element
Animiert Größe und Position für einen Namen
pageswap / pagereveal
Events
Lassen ein Skript eine Transition zwischen Dokumenten anpassen
Hafen
Wiese
Glut
Dämmerung
Schiefer
Koralle
Reduzierte Bewegung ist aktiviert, deshalb erfolgte die Änderung sofort.
Dein Browser unterstützt keine View Transitions, deshalb erfolgte die Änderung sofort.
Live-Demo
Mische das Raster oder öffne eine Karte. Jede Kachel hat ihren eigenen view-transition-name, deshalb animiert der Browser sie an ihre neue Position.
Mischen
Zurück zum Raster
Der Farbblock und der Titel haben sich aus dem Raster verwandelt, weil sie hier dieselben Namen behalten.