Inhalt
Stellen Sie sich eine Website vor, die nahtlos zwischen Seiten wechselt, zum Beispiel von index.html zu about.html, ohne das typische ruckartige Neuladen. Dieses nahtlose Navigationserlebnis ist dank der View Transition API, die von modernen Browsern unterstützt wird, jetzt möglich. Historisch waren solche sanften animierten Übergänge meist auf Single-Page-Anwendungen (SPAs) beschränkt, die Inhalte dynamisch ohne vollständiges Neuladen aktualisieren. Mit Fortschritten in CSS und Browserfähigkeiten können nun auch Multi-Page-Anwendungen (MPAs) vergleichbare Effekte bieten, die das Benutzererlebnis verbessern, ohne komplexe JavaScript-Implementierungen.\n\nZur Klarstellung: MPAs und SPAs repräsentieren zwei grundlegende Ansätze der Webentwicklung. MPAs laden bei jeder Navigation eine neue HTML-Seite vom Server, was zu einem vollständigen Seiten-Reload führt. Dieses Modell ist einfach zu erstellen und zu verwalten, besonders für große Anwendungen mit vielen unterschiedlichen Seiten. Im Gegensatz dazu laden SPAs eine einzelne HTML-Seite und ändern Inhalte dynamisch mit JavaScript, was schnellere Interaktionen und flüssigere Benutzererlebnisse ermöglicht, allerdings auf Kosten komplexerer clientseitiger Routing- und Zustandsverwaltung.\n\nDie View Transition API zusammen mit der CSS @view-transition At-Regel ermöglicht es MPAs, sanfte, animierte Übergänge nativ einzubauen. Diese Entwicklung ist auf progressive Verbesserung ausgelegt, sodass Seiten auch in Browsern ohne Unterstützung dieser Funktionen funktionsfähig bleiben, da das CSS als optionale Verbesserung behandelt wird. Bezüglich der Browserkompatibilität wird Level 1 der CSS View Transitions-Spezifikation, die Übergänge innerhalb einer einzelnen Seite ermöglicht, derzeit von Chrome, Edge und Safari unterstützt, mit Firefox-Unterstützung in Beta-Versionen. Level 2, das Übergänge über mehrere Seiten erlaubt, ist in Chrome 126+, Edge 126+ und Safari 18.2+ verfügbar, mit erwarteter Unterstützung in Firefox in der Zukunft.\n\nDie Implementierung eines einfachen View Transitions ist überraschend einfach. Durch Hinzufügen einer einzigen CSS-Zeile – @view-transition { navigation: auto; } – können Entwickler sanfte Übergänge zwischen Seiten in ihren MPAs aktivieren. Zum Beispiel können zwei Demo-Seiten, index.html und hobbies.html, jeweils mit einfachem Inhalt und Navigationslinks, so gestaltet werden, dass sie nahtlose Übergänge zeigen. Das begleitende CSS legt Schriftarten, Layoutbeschränkungen und unterschiedliche Hintergrundfarben für jede Seite fest, während die wichtige @view-transition-Regel dem Browser ermöglicht, die Navigation zu animieren.\n\nÜber diese Standardfunktion hinaus können Entwickler das Übergangserlebnis anpassen. Durch die Nutzung spezieller CSS-Pseudoelemente, nämlich ::view-transition-old(root) und ::view-transition-new(root), kann man die ausgehende bzw. eingehende Seite gezielt ansprechen. Beispielsweise kann eine Slide-in-Animation namens slide-from-right auf die neue Seite angewendet werden, damit sie sanft von der rechten Seite des Viewports hereingleitet. Entsprechend kann eine slide-to-right-Animation auf die alte Seite angewendet werden, um sie beim Zurücknavigieren herausgleiten zu lassen. Diese Animationen ersetzen die standardmäßige Cross-Fade-Übergang des Browsers und zeigen die Flexibilität der View Transition API, maßgeschneiderte Effekte ohne JavaScript zu erstellen.\n\nZusammenfassend markiert die Einführung von View Transitions via CSS eine bedeutende Entwicklung für Multi-Page-Webanwendungen. Entwickler können nun Benutzererlebnisse mit sanften Animationen zwischen Seiten mit minimalem Aufwand bereichern, ohne Kompatibilität einzubüßen. Diese Fähigkeit verringert die Erfahrungsunterschiede zwischen MPAs und SPAs und macht anspruchsvolle, animierte Navigation für eine breitere Palette von Webarchitekturen zugänglich.
