2025
View Transitions

View Transition

Übersetzt aus dem Englischen mit DeepL.

Datum: Mai 2025
Lesedauer: 2 Minuten

Kurze Hinweise und Einblicke in die View Transitions API, die sich auf die praktische Nutzung und das Verhalten konzentrieren.

Ressourcen

Was ist es?

"Mit der View Transition API können Sie nahtlose visuelle Übergänge zwischen verschiedenen Ansichten auf Ihrer Website erstellen. So wird die visuelle Nutzerfreundlichkeit beim Navigieren auf Ihrer Website verbessert, unabhängig davon, ob es sich um eine mehrseitige Anwendung (Multi-Page-Anwendung, MPA) oder eine Single-Page-Anwendung (SPA) handelt."
Quelle: chrome for developers

Bislang waren nahtlose Übergänge zwischen Seiten nahezu unmöglich - insbesondere in MPAs, da jede Navigation eine neue HTML-Datei mit eigenen Styles und eigenem Layout-Kontext lädt. Die View Transition API löst dieses Problem, indem sie Übergänge über Seitengrenzen hinweg mit minimalem Aufwand ermöglicht.

Verwendung

Für einen einfachen Übergang füget man das folgende CSS sowohl in das aktuelle als auch in das Zieldokument ein:

@view-transition {
    navigation: auto;
}

Von der``at-rule @view-transition bs hin zu Pseudo-Elementen und der JavaScript-API bietet die View Transition API zahlreiche Möglichkeiten zur Verbesserung der Navigation. Einzelheiten findet man in den oben genannten Ressourcen.

Anwendungsfälle

  • Thumbnail-Bild, das in ein Bild in voller Grösse übergeht
  • Übergang zwischen Seiten durch Bedienung der Navigation
  • Umwandlung des Linktextes in die Überschrift beim Öffnen des Links
  • ...

Anstelle komplexer Übergänge bieten subtile Mikroanimationen oft eine reibungslosere, natürlichere Benutzererfahrung.

Funktionsweise

So funktioniert die View Transition API:

  1. Übergang starten
    Das Auslösen von document.startViewTransition() startet den Prozess
  2. Alten Zustand festhalten
    Der Browser macht einen Snapshot des aktuellen DOMs
  3. DOM Aktualisierung
    Das DOM repräsentiert die Zeilseite
  4. Erfassen des neuen Zustands
    Der Browser macht einen zweiten Snapshot des aktualisierten DOM
  5. Übergang animieren
    Animation zwischen dem alten und dem neuen Snapshot mit CSS (::view-transition-old und ::view-transition-new)
  6. Aufräumen
    Snapshots werden entfernen

A11y

Bei Übergängen ist das DOM der Zielseite sofort nach der Ausläsung aktiv, was Probleme mit der Zugänglichkeit verhindert.
Allerdings kann die übermässige Verwendung von Animationen - insbesondere von langen - die Benutzer verwirren. Wenn sich beispielsweise ein Element während des Übergangs umwandelt, könnten Benutzer versuchen, mit dem ursprünglichen Element zu interagieren, ohne zu wissen, dass es bereits ersetzt wurde.
Wenn sie jedoch richtig implementiert werden, mit kurzen, unterstützenden gibt es keine nennenswerten Probleme mit der Zugänglichkeit.
Tipp: Für Nutzer mit aktivierter reduced-motion sollten die Animationen entfernt werden.

Leistung

View Transitions effizient implementiert. Ihre Leistung hängt jedoch von der Verwendung ab.

Browser-Support

Derzeit bietet Firefox keinen Support für dsa Feature: https://caniuse.com/?search=view%20transition (opens in a new tab)
Bei korrekter Implementierung profitieren Benutzer unterstützter Browser jedoch von den Transitions, während Firefox-Benutzer keine negativen Auswirkungen spüren.