Heute möchten wir Ihnen die Vorteile von Chrome und Astro mit der View Transitions API vorstellen. Dazu gehört auch, wie die Astro-Community die API frühzeitig annahm und damit experimentierte und so der breiteren Gemeinschaft die Möglichkeiten aufzeigte. Außerdem freuen wir uns, Ihnen mehr über die neue integrierte Unterstützung für View-Übergänge in Astro 3.0 zu erzählen.
Hintergrund
Nahtlose Übergänge zwischen verschiedenen Status einer Seite, auch Statusübergänge genannt,waren schon immer ein komplexer Aspekt bei der Erstellung nahtloser, animierter Erlebnisse im Web. Trotz der Verfügbarkeit von Tools wie CSS-Übergängen, CSS-Animationen und der Web Animation API ist das Erstellen von Statusübergängen eine gewaltige Aufgabe. Eine der Herausforderungen besteht darin, die Interaktion mit ausgehenden Elementen zu handhaben, wodurch die Umstellungen komplexer werden können.
Darüber hinaus ist es schwierig, die Leseposition und Konzentration bei unterstützenden Geräten beizubehalten. Außerdem macht der Umgang mit unterschiedlichen Scrollpositionen die Statusübergänge umständlich. All diese Faktoren tragen zur Komplexität der Implementierung reibungsloser Übergänge zwischen verschiedenen Elementen auf einer Webseite bei.
Die View Transitions API erwies sich als Lösung des Browsers für diese Herausforderungen. Dieses neue API bietet eine einfachere Möglichkeit, das DOM in einem einzigen Schritt zu ändern, während ein animierter Übergang zwischen zwei Zuständen erstellt wird.
Die Einführung der View Transitions API in Chrome 111 war der Beginn einer breiter gefassten Vision zur Unterstützung der Umstellung für alle Websites, nicht nur für JavaScript-basierte Webanwendungen. Weitere Verbesserungen sind geplant. In Zukunft wird Chrome möglicherweise interessante Neuerungen wie Übergänge zwischen Dokumenten, kompositorgesteuerte Animationen, Bereichsübergänge und verschachtelte Übergangsgruppen ausprobieren.
Erste explorative Datenanalysen mit Ansichtenübergängen
Chrome nutzte die View Transitions API nicht allein. Feedback und Zusammenarbeit von Entwicklern, Framework-Autoren und der Arbeitsgruppe für Preisvergleichsportale spielten über mehrere Jahre eine entscheidende Rolle bei der Entwicklung der Funktion.
Experimente von Entwicklern spielten von Anfang an eine wichtige Rolle. In den ersten Versionen der API wurden CSS-Animationen nicht unterstützt und Übergänge waren auf einige restriktive Voreinstellungen beschränkt. Die ersten Rückmeldungen machten deutlich, dass die Entwickler sich die Umstellungen vollständig anpassbar und ausdrucksstark wünschen. Durch diese ständige Zusammenarbeit wurde sichergestellt, dass die API mit einem Gleichgewicht aus guten Standardeinstellungen, Erweiterbarkeit und Anpassungsmöglichkeiten entwickelt wurde.
Astro gehörte zu diesen Konzepten, die schon früh auf View Transitions einsetzten. Der Rest dieses Artikels bezieht sich aus der Perspektive des Astro-Teams und teilt ihre Erfahrungen bei der Suche, Übernahme und Berücksichtigung von View Transitions bei der Webentwicklung.
Warum Astro auf Aufrufübergänge setzt
Astro hat schon lange nach „View Transitions“ gesucht. Astro ist ein JavaScript-Web-Framework, das Ihre UI-Komponenten in vereinfachtem HTML-Code rendert, damit die Seite schneller geladen wird. Astro verlagert so viel Arbeit absichtlich vom Clientgerät wie möglich. Astro-Websites nutzen die native Browserseitennavigation, wobei andere Web-Frameworks die Browsernavigation stattdessen mit clientseitigem JavaScript-Routing hacken können.
Dieser Kompromiss stellte eine Herausforderung für das Astro-Team dar: Wie konnte Astro Seitenübergänge animieren und eine App-ähnliche Benutzeroberfläche seitenübergreifend bereitstellen, ohne ein clientseitiges Routing zu verwenden?
Die Lösung: View-Übergänge. Mit View Transitions konnte Astro dieselben Routingfunktionen wie JavaScript-basierte SPA-Web-Frameworks bereitstellen, allerdings ohne die Leistung und Komplexität des clientseitigen Routings. Andere Frameworks betrachteten View Transitions als optionales Implementierungsdetail, aber für Astro war es viel größer.
Die nächste Frage, die das Astro-Team beantworten musste, war: „Wie?“. Das Team suchte nach Projekten wie Turbo, Swup und Livewire und entwickelte sogar Prototypen für ähnliche Ansätze in Astro.
Einer der ersten Versuche umfasste einen ganzseitigen „intelligenten Übergang“, bei dem jede neue HTML-Seite automatisch mit dem aktuellen HTML-Code verglichen und dann versucht wurde, mithilfe von JavaScript alle Elemente gleichzeitig zu ersetzen. Es war klug, aber auch 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 zeigte die Astro-Community, dass die View Transitions API bereits eine leistungsstarke API war, ohne dass das Produkt zu kompliziert war. Nachdem das Astro-Team einige erste Demos gesehen hatte, war es von einer einfachen Astro-API überzeugt, die den Browser-APIs möglichst genau entsprechen konnte. Statt View-Übergänge als unsichtbares, in Astro verstecktes Detail zu sehen, könnten sie auch direkt für die Entwickler sichtbar sein. Direkte Abstimmung von Astro mit der Webplattform und Reduzierung der Gesamtkomplexität am Frontend
---
// 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 einfach: Die neue View Transitions API wurde in Astro integriert und es wurden automatische Fallbacks bereitgestellt, die auf so viele Websites und Browser wie möglich verfügbar waren. Die Fallback-Unterstützung ist wichtig, da die meisten Browser (außerhalb von Chrome) noch nicht die volle Unterstützung für native View-Übergänge bieten.
Einführung des offiziellen Supports in Astro
Astro hat die experimentelle Unterstützung von Ansichtsübergängen in Astro 2.9 veröffentlicht. Die Resonanz war sofort positiv. Die Entwickler begannen damit, unglaubliche Demos von so vielen verschiedenen Anwendungsfällen zu teilen, und in einigen Fällen haben sie sogar alle für die Produktion veröffentlicht.
Astro 3.0: Abgeschlossen: Unterstützung der neuen View Transitions API für alle Nutzer Diese neuen APIs können Sie jetzt experimentell oder zusammen verwenden.
<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 Abstimmung von Astro mit den Plattform-APIs ist die Möglichkeit, mit der Entwicklung neuer Funktionen auf der Basis der nativen View Transitions API zu experimentieren. Mit der neuen Astro-Anweisung transition:persist lässt sich beispielsweise jedes Element über die gesamte Seitennavigation hinweg beibehalten. Dies ermöglicht langlebige Elemente wie persistente Audio- und Videoplayer, was früher nur in komplexen 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 hat außerdem die Möglichkeit, View Transitions für Entwickler ergonomischer zu gestalten. Das Team hat beispielsweise bereits Unterstützung für benutzerdefinierte Vorwärts- und Rückwärtsanimationen und Animationen für dynamisches HTML hinzugefügt. Beide Funktionen allein sind mit den Low-Level-APIs schwierig zu bewältigen, in Astro sind sie jedoch praktisch ohne Aufwand.
Diese Funktionen sind vorerst nur in Astro verfügbar, aber das Astro-Team hofft, ihre Erfahrungen an die Autoren und Arbeitsgruppen der Spezifikation weitergeben zu können, um in Zukunft mögliche Browser-Verbesserungen zu erhalten. Sie können beispielsweise ein Angebot genau beobachten, um das Teilen von Animationen in CSS zu vereinfachen.
Was steht als Nächstes an?
Die Zukunft von View Transitions im Web ist rosig. Astro, Nuxt und HTMX haben alle ein gewisses Maß an Unterstützung bereitgestellt, und viele andere haben Interesse bekundet.
Das Chrome-Team freut sich über die native Unterstützung von View Transitions von Astro. Sie stellt einen großen Schritt in der Webentwicklung dar und ermöglicht eine reibungslosere und dynamischere Nutzererfahrung. Wir empfehlen Entwicklern, sich genauer mit View Transitions in Astro 3.0 vertraut zu machen. Diese Verbesserungen sind bahnbrechend, unabhängig davon, ob Sie neue Landingpages erstellen oder vorhandene Websites aktualisieren. Mit View Transitions konnte die Lücke zwischen dem, was mit SPAs und MPAs alles möglich ist, geschlossen werden. Chrome würde gerne von Ihnen wissen, ob es weitere Lücken beim Support für SPA und/oder MPA gibt. Sie können gern einen Kommentar zum WICG-GitHub-Repository zu Transformationen aufrufen, um mehr darüber zu erfahren.
Die innovativen Demos und Anwendungen, die wir gesehen haben, lassen uns bereits inspirieren und wir sind schon gespannt, was wir noch sehen werden. Mit „View Transitions“ gestalten Sie die Zukunft des Webs. Probiert „View Transitions“ in Astro aus, teilt eure Arbeit und lasst uns diese Reise gemeinsam fortsetzen.