Mit der View Transition API können Sie nahtlose visuelle Übergänge zwischen verschiedenen Ansichten auf Ihrer Website erstellen. Das sorgt für eine visuell ansprechendere Nutzererfahrung, unabhängig davon, ob es sich um eine mehrseitige Anwendung (Multi-Page-Anwendung, MPA) oder eine Single-Page-Anwendung (SPA) handelt.
Typische Situationen, in denen Sie Ansichtsübergänge verwenden würden:
- Eine Miniaturansicht auf einer Seite mit Produktinformationen, die auf der Seite mit den Produktdetails zu einem Produktbild in voller Größe übergeht.
- Eine fixierte Navigationsleiste, die an Ort und Stelle bleibt, wenn Sie von einer Seite zur nächsten wechseln.
- Ein Raster mit Elementen, die sich beim Filtern verschieben.
Ansichtsübergänge implementieren
Ansichtsübergänge sind nicht an eine bestimmte Anwendungsarchitektur oder ein bestimmtes Framework gebunden und können nicht nur für ein einzelnes Dokument, sondern auch zwischen zwei verschiedenen Dokumenten ausgelöst werden.
Beide Arten von Ansichtsübergängen basieren auf denselben Bausteinen und Prinzipien:
- Der Browser erstellt Snapshots des alten und des neuen Zustands.
- Das DOM wird aktualisiert, während das Rendering unterdrückt wird.
- Die Übergänge werden durch CSS-Animationen unterstützt.
Der einzige Unterschied zwischen den beiden Typen besteht darin, wie sie ausgelöst werden.
Ansichtsübergänge im selben Dokument
Wenn ein Ansichtsübergang in einem einzelnen Dokument ausgeführt wird, wird er als Ansichtsübergang im selben Dokument bezeichnet. Das ist in der Regel bei Single-Page-Anwendungen (SPAs) der Fall. In Chrome 111 und höher werden Übergänge zwischen Ansichten desselben Dokuments unterstützt.
Auslöser
So lösen Sie Ansichtsübergänge innerhalb desselben Dokuments aus, indem Sie document.startViewTransition aufrufen:
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
Beispiel
Das folgende Kartenbeispiel ist eine SPA, bei der Ansichtsübergänge im selben Dokument verwendet werden, um die Karten zu animieren, wenn neue hinzugefügt oder entfernt werden.
Gleich mit dem Erstellen loslegen
Auf der entsprechenden Dokumentationsseite finden Sie alle Informationen zu Übergängen zwischen Ansichten desselben Dokuments.
Übergänge zwischen Ansichten desselben Dokuments erstellen
Ansichtsübergänge zwischen Dokumenten
Ein Aufrufübergang zwischen zwei verschiedenen Dokumenten wird als dokumentübergreifender Übergang bezeichnet. Das ist typisch für MPAs. Ansichtsübergänge zwischen Dokumenten werden ab Chrome 126 unterstützt.
Unterstützte Browser
Auslöser
Ansichtsübergänge zwischen Dokumenten werden durch eine ursprungsübergreifende Navigation zwischen Dokumenten ausgelöst, wenn beide Seiten aktiviert sind. Mit anderen Worten: Es gibt keine API, die aufgerufen werden kann, um einen dokumentübergreifenden Ansichtsübergang zu starten. Wenn ein Nutzer auf einen Link klickt, löst der Klick den Aufrufübergang aus.
Verwenden Sie dazu das folgende CSS-Snippet:
@view-transition {
navigation: auto;
}
Beispiel
Das folgende Beispiel für einen Stack Navigator ist ein MPA, das ansichtenübergreifende Übergänge zwischen zwei verschiedenen Dokumenten verwendet. Je nachdem, ob Sie tiefer in die Navigation einsteigen oder nicht, werden Seiten in den Stapel geschoben oder herausgeschoben.
Gleich mit dem Erstellen loslegen
Hier finden Sie alle Informationen zu Dokumentübergängen.