Die View Transitions API: Reibungslose Seiten- und Statusänderungen im Browser
Was die View Transitions API macht, wie dokumentübergreifende und dokumentübergreifende Übergänge funktionieren, wie man sie mit CSS formatiert und wie man sie verantwortungsbewusst verwendet.
Kernaussage
Mit der View Transitions API kann der Browser zwischen zwei Zuständen einer Seite animieren. Rufen Sie document.startViewTransition() mit einer Funktion auf, die das DOM aktualisiert, und der Browser erstellt einen Snapshot der alten und neuen Ansichten und animiert zwischen ihnen, was Sie mit ::view-transition-Pseudoelementen formatieren können. Es funktioniert in Single-Page-Apps und, in unterstützenden Browsern, über Seitennavigation hinweg.
Wie es funktioniert
MDN beschreibt document.startViewTransition() als Start eines Ansichtsübergangs im gleichen Dokument, wie er bei Single-Page-Apps üblich ist. Der Browser erfasst die aktuelle Ansicht, führt Ihr Update aus, erfasst die neue Ansicht und führt eine Animation zwischen ihnen durch. Standardmäßig handelt es sich dabei um eine Überblendung; Mit CSS können Sie es ändern.
Gleiches Dokument und dokumentübergreifend
Übergänge zwischen gleichen Dokumenten werden innerhalb einer Seite ausgeführt, wie in SPAs, und Chrome unterstützt sie seit Chrome 111. Dokumentübergreifende Übergänge werden zwischen separaten Seiten in mehrseitigen Websites animiert, was laut MDN in der Vergangenheit unmöglich war; Sie nutzen die Events „pageswap“ und „pagereveal“ sowie ein Opt-in in CSS. Die Browserunterstützung unterscheidet sich zwischen beiden. Überprüfen Sie daher die aktuellen Kompatibilitätstabellen.
Den Übergang gestalten
Die meisten Anpassungen sind einfach CSS:
- Geben Sie einem Element einen Ansichtsübergangsnamen, um es getrennt vom Rest der Seite zu animieren, z. B. ein Miniaturbild, das zu einem Heldenbild heranwächst.
- Zielen Sie auf ::view-transition-old() und ::view-transition-new(), um die Animation anzupassen.
- Halten Sie die Dauer kurz und die Bewegung aussagekräftig.
- Binden Sie benutzerdefinierte Animationen in Überprüfungen mit reduzierter Bewegung ein.
Progressive Verbesserung
Überprüfen Sie immer die Unterstützung, bevor Sie die API aufrufen, und aktualisieren Sie das DOM direkt, wenn es fehlt. Die Seite sollte ohne die Animation identisch funktionieren. Vermeiden Sie lange Übergänge in der Navigation, da diese die gesamte Website langsamer erscheinen lassen.
Produktionsnahes Implementierungsbeispiel
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Wichtige Prinzipien
- startViewTransition() erstellt Snapshots alter und neuer Ansichten und animiert zwischen ihnen
- Es gibt Same-Document- (SPA) und Cross-Document-Varianten (mehrseitig).
- Stil mit den Pseudoelementen view-transition-name und ::view-transition
- Überprüfen Sie den Support und greifen Sie auf ein sofortiges Update zurück
- Halten Sie Übergänge kurz und respektieren Sie reduzierte Bewegungen
Häufige Fragen
Quellen
- View Transition API — MDN Webdokumente
- Smooth transitions with the View Transition API — Chrome für Entwickler