Heute möchten wir Ihnen mehr über die Entwicklung der View Transitions API in Chrome und Astro erzählen. Dazu gehört auch, wie die Astro-Community die API früh angenommen und damit experimentiert hat, um die Möglichkeiten für die breitere Community hervorzuheben. Außerdem gibt es Neuigkeiten zur neuen integrierten Unterstützung für Ansichtsübergänge in Astro 3.0.
Hintergrund
Nahtlose Übergänge zwischen verschiedenen Zuständen einer Seite, sogenannte Zustandsübergänge,waren schon immer ein komplexer Aspekt beim Erstellen nahtloser, animierter Websites. Trotz Tools wie CSS-Übergängen, CSS-Animationen und der Web Animation API ist das Erstellen von Statusübergängen nach wie vor eine schwierige Aufgabe. Eine der Herausforderungen besteht darin, die Interaktion mit ausgehenden Elementen zu steuern, was die Übergänge komplexer machen kann.
Außerdem ist es schwierig, die Leseposition und den Fokus für Hilfsgeräte beizubehalten. Außerdem sind Statusübergänge mit Unterschieden bei der Scrollposition umständlich. All diese Faktoren tragen dazu bei, dass es schwierig ist, reibungslose Übergänge zwischen verschiedenen Elementen auf einer Webseite zu implementieren.
Die View Transitions API war die Lösung des Browsers für diese Herausforderungen. Mit dieser neuen API können Sie das DOM in einem einzigen Schritt ändern und gleichzeitig einen animierten Übergang zwischen zwei Status erstellen.
Die Einführung der View Transitions API in Chrome 111 war der Beginn einer umfassenderen Vision für die Unterstützung von Übergängen für alle Websites, nicht nur für JavaScript-basierte Webanwendungen. Weitere Verbesserungen sind in Planung. In Zukunft wird es in Chrome möglicherweise spannende Ergänzungen wie Übergänge zwischen Dokumenten, kompositionsbasierte Animationen, bereichsspezifische Übergänge und verschachtelte Übergangsgruppen geben.
Erste explorative Datenanalysen mit Ansichtsübergängen
Die Entwicklung der View Transitions API für Chrome war nicht ein Einzelprojekt. Feedback und Zusammenarbeit von Entwicklern, Framework-Autoren und der CSS-Arbeitsgruppe haben im Laufe der Jahre entscheidend zur Entwicklung der Funktion beigetragen.
Experimente der Entwickler spielten schon früh eine wichtige Rolle. Die ersten Versionen der API unterstützten keine CSS-Animationen und Übergänge waren auf einige wenige eingeschränkte Voreinstellungen beschränkt. Aus dem ersten Feedback ging hervor, dass Entwickler wünschen, dass Übergänge vollständig anpassbar und ausdrucksstark sind. Durch diese Zusammenarbeit wurde sichergestellt, dass die API mit einer guten Balance zwischen Standardeinstellungen, Erweiterbarkeit und Anpassungsfähigkeit entwickelt wurde.
Astro war eines der ersten Frameworks, das sich auf Ansichtsübergänge konzentrierte. Im Rest dieses Artikels wird aus der Sicht des Astro-Teams berichtet, wie es die Ansichtsübergänge gefunden, übernommen und in den Mittelpunkt der Webentwicklung gestellt hat.
Warum Astro auf Ansichtsübergänge setzt
Astro suchte schon lange nach einer Funktion wie Ansichtsübergänge. Astro ist ein JavaScript-Webframework, das Ihre UI-Komponenten auf dem Server in schlankes HTML rendert, um die Seitenladeleistung zu beschleunigen. Astro verlagert bewusst so viel Arbeit wie möglich vom Clientgerät weg. Astro-Websites verwenden die native Browserseitennavigation, während andere Web-Frameworks die Browsernavigation stattdessen mit clientseitigem JavaScript-Routing manipulieren könnten.
Dieser Kompromiss stellte das Astro-Team vor eine Herausforderung: Wie konnte Astro Seitenübergänge animieren und eine app-ähnliche UI-Persistenz über Seiten hinweg bieten, ohne clientseitiges Routing zu verwenden?
Die Antwort lautete „Übergangseffekte“. Mit Ansichtsübergängen konnte Astro dieselben Routingfunktionen wie JavaScript-lastige SPA-Webframeworks bieten, jedoch ohne den Leistungs- und Komplexitätsaufwand des clientseitigen Routings. Andere Frameworks betrachteten Ansichtsübergänge als optionales Implementierungsdetail, aber für Astro war es etwas viel Größeres.
Die nächste Frage, die das Astro-Team beantworten musste, war: „Wie?“ Das Team ließ sich von Projekten wie Turbo, Swup und Livewire inspirieren und entwickelte sogar einige ähnliche Ansätze in Astro.
Einer der frühesten Versuche bestand in einer „intelligenten Überleitung“ für eine ganze Seite, bei der jede neue HTML-Seite automatisch mit der aktuellen HTML-Seite verglichen und dann versucht wurde, alle Elemente gleichzeitig mit JavaScript zu ersetzen. Es war clever, aber fehleranfällig.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Glücklicherweise hat die Astro-Community gezeigt, dass die View Transitions API bereits leistungsstark war, ohne dass das Produkt zu kompliziert wurde. Nachdem das Astro-Team einige frühe Demos gesehen hatte, war es von der Idee einer einfachen Astro API überzeugt, die den Browser-APIs so nahe wie möglich kommen sollte. Anstatt Ansichtsübergänge als unsichtbares Implementierungsdetail in Astro zu betrachten, könnten sie dem Entwickler direkt angezeigt werden. Astro direkt an die Webplattform anpassen und die Komplexität im Frontend insgesamt reduzieren.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
Die Arbeit wurde einfacher: Die neue View Transitions API in Astro einbinden und automatische Fallbacks bereitstellen, die auf möglichst vielen Websites und in möglichst vielen Browsern funktionieren. Ein Fallback ist unerlässlich, da die meisten Browser (außer Chrome) noch keine vollständige Unterstützung für native Ansichtsübergänge bieten.
Einführung des offiziellen Supports in Astro
Astro hat in Astro 2.9 eine experimentelle Unterstützung für Ansichtsübergänge veröffentlicht. Die Reaktion war sofort positiv. Entwickler begannen, unglaubliche Demos für so viele verschiedene Anwendungsfälle zu teilen und in einigen Fällen sogar in die Produktion zu bringen.
Mit Astro 3.0 wird die Unterstützung der neuen View Transitions API für alle Nutzer endgültig freigeschaltet. Sie können diese neuen APIs jetzt testen oder direkt einbinden.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Ein unerwarteter Vorteil der Ausrichtung von Astro auf die Plattform-APIs ist die Möglichkeit, neue Funktionen auf der nativen View Transitions API zu entwickeln. Mit der neuen Astro-transition:persist-Anweisung kann beispielsweise jedes Element über eine vollständige Navigationsseite hinweg beibehalten werden. So können langlebige Elemente wie persistente Audio- und Videoplayer verwendet werden, was früher nur in leistungsintensiven JavaScript-SPAs möglich war.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Astro kann auch die Ansichtsübergänge für Entwickler ergonomischer gestalten. So wurde beispielsweise bereits die Unterstützung für benutzerdefinierte Vor-/Zurück-Animationen und Animationen für dynamisches HTML hinzugefügt. Beide Funktionen sind mit den APIs der unteren Ebene allein nur schwer zu realisieren, in Astro sind sie jedoch praktisch mühelos.
Diese Funktionen sind derzeit nur in Astro verfügbar. Das Astro-Team hofft jedoch, seine Erfahrungen an die Verfasser der Spezifikation und die Arbeitsgruppen weitergeben zu können, um zukünftige Browserverbesserungen zu ermöglichen. Beispielsweise durch eine genaue Beobachtung eines Vorschlags, um das Teilen von Animationen in CSS zu vereinfachen.
Was steht als Nächstes an?
Die Zukunft von Aufrufübergängen im Web ist vielversprechend. Astro, Nuxt und HTMX bieten bereits einen gewissen Support und viele andere haben ihr Interesse bekundet.
Das Chrome-Team freut sich über die Unterstützung der nativen Ansichtsübergänge in Astro. Das ist ein großer Schritt für die Webentwicklung, der eine flüssigere und dynamischere Nutzererfahrung ermöglicht. Entwickler sollten sich die Ansichtsübergänge in Astro 3.0 genauer ansehen. Ganz gleich, ob Sie neue Landingpages erstellen oder vorhandene Websites aktualisieren, diese Verbesserungen sind ein echter Gamechanger. Mithilfe von Bildübergängen konnten wir die Lücke zwischen den Möglichkeiten von SPAs und MPAs schließen. Wir würden uns freuen, wenn Sie uns mitteilen, ob es weitere Lücken bei der Unterstützung von SPAs und/oder MPAs gibt. Sie können im WICG-GitHub-Repository für Ansichtsübergänge einen Kommentar hinterlassen, um das Thema weiter zu besprechen.
Wir sind schon jetzt von den innovativen Demos und Anwendungen begeistert, die wir gesehen haben, und freuen uns auf weitere. Ihre Arbeit mit Ansichtsübergängen gestaltet die Zukunft des Webs. Probieren Sie die Ansichtsübergänge in Astro aus, teilen Sie Ihre Arbeit und lassen Sie uns gemeinsam weitermachen.