Multi-page application View Transitions are here

Summary

In diesem Video spricht Bramus, ein Developer Relations Engineer bei Google, über die neuen Funktionen der View-Transitions in Chrome, die eine nahtlose, native Benutzererfahrung für Webanwendungen ermöglichen. Ursprünglich für Single-Page-Anwendungen (SPAs) eingeführt, werden View-Transitions nun auch für Multi-Page-Anwendungen (MPAs) verfügbar. Entwickler können zwischen verschiedenen Seiten derselben Herkunft animierte Übergänge schaffen, ohne die Struktur ihrer Anwendung zu ändern. Es werden neue Events und CSS-Regeln eingeführt, um die Gestaltung von Übergängen zu vereinfachen. Außerdem wird auf kommende Funktionen wie Scope-Transitions und gesteuerte Übergänge durch Wischgesten hingewiesen, um die Benutzerinteraktionen weiter zu verbessern.

Takeaways

• 😀 Die Einführung von View-Transitions in Chrome 111 ermöglicht nahtlose Übergänge zwischen Ansichten in Web-Apps, die eine native Nutzererfahrung nachahmen.
• 😀 View-Transitions bieten Entwicklern die Möglichkeit, Übergänge zwischen Seiten eines Single-Page Applications (SPA) mit einer einzigen Zeile JavaScript zu erstellen.
• 😀 Die neuen Cross-Document View-Transitions, die 2024 eingeführt werden, ermöglichen nahtlose Übergänge zwischen verschiedenen Seiten einer Multi-Page Application (MPA) ohne Umstellung auf eine SPA-Architektur.
• 😀 Cross-Document View-Transitions arbeiten auf der gleichen Grundlage wie Single-Document View-Transitions, aber der Übergang wird durch eine Navigation ausgelöst, nicht durch eine API-Aufruf.
• 😀 Um View-Transitions für Cross-Dokument-Navigationen zu aktivieren, müssen beide Seiten CSS-Regeln mit der @view-transition Direktive und dem NavigationDescriptor 'auto' enthalten.
• 😀 Zwei neue Events, 'pageswap' und 'pagereveal', ermöglichen es Entwicklern, Übergänge individuell anzupassen, je nachdem, von welcher Seite oder zu welcher Seite der Nutzer navigiert.
• 😀 Der 'pageswap'-Event tritt ein, bevor die letzte Frame des alten Dokuments gerendert wird, und bietet die Möglichkeit, Übergangsanimationen vor der Aufnahme von Snapshots zu steuern.
• 😀 Der 'pagereveal'-Event wird ausgelöst, wenn die neue Seite zu rendern beginnt und ermöglicht es, JavaScript zur Anpassung der Darstellung vor dem ersten Frame zu nutzen.
• 😀 Um Renderingprobleme zu vermeiden, können Entwickler mit dem 'blocking=render' Attribut festlegen, dass die Seite erst dann gerendert wird, wenn bestimmte Elemente im DOM vorhanden sind.
• 😀 Das Prerendering von Seiten mit der Speculation Rules API kann Ladezeiten verkürzen und zu einer sofortigen Benutzererfahrung bei Übergängen führen.
• 😀 In zukünftigen Updates wird es neue Funktionen wie Scope-Transitions, Navigationsübereinstimmung in CSS und gesteuerte Übergänge durch Gesten für eine noch flüssigere Benutzererfahrung auf Webanwendungen geben.

Q & A

Was sind View-Transitions und wie tragen sie zur Benutzererfahrung bei?

View-Transitions ermöglichen es Entwicklern, nahtlose Übergänge zwischen Ansichten ihrer Webanwendung zu erstellen, um eine nativen, immersiven Benutzererfahrung zu bieten. Dies verbessert die visuelle Kohärenz und macht den Wechsel zwischen verschiedenen Seiten oder Komponenten der Anwendung fließender.

Wann wurden die View-Transitions erstmals in Chrome eingeführt und was war der Ausgangspunkt?

Die View-Transitions wurden erstmals in Chrome 111 eingeführt, was ein wichtiger Meilenstein für das Web darstellt. Diese Funktion ermöglichte Übergänge innerhalb einer einzigen Seite (Single Page Application).

Was sind Cross-Document-View-Transitions und wie unterscheiden sie sich von Same-Document-View-Transitions?

Cross-Document-View-Transitions ermöglichen Übergänge zwischen verschiedenen Seiten einer Webanwendung, während Same-Document-View-Transitions nur innerhalb einer einzelnen Seite funktionieren. Der Hauptunterschied ist, dass Cross-Document-View-Transitions zwischen verschiedenen Seiten auf derselben Origin stattfinden, ohne dass die Webanwendung neu strukturiert werden muss.

Wie können Entwickler Cross-Document-View-Transitions in ihrer Anwendung implementieren?

Entwickler können Cross-Document-View-Transitions durch eine einfache Navigation zwischen Seiten auf derselben Origin aktivieren, ohne eine API zu benötigen. Stattdessen wird der Übergang durch das Klicken auf einen Link oder eine ähnliche Navigation ausgelöst. Beide Seiten müssen allerdings ausdrücklich View-Transitions über CSS aktivieren.

Welche Rolle spielen die Events 'pageswap' und 'pagereveal' bei der Implementierung von View-Transitions?

'Pageswap' wird ausgelöst, bevor die letzte Frame der alten Seite gerendert wird, und gibt Entwicklern die Möglichkeit, letzte Anpassungen vorzunehmen. 'Pagereveal' wird ausgelöst, wenn die neue Seite zum ersten Mal gerendert wird. Beide Events ermöglichen es, View-Transitions für eine bessere Benutzererfahrung dynamisch zu steuern.

Was ist der Zweck der neuen CSS-Regel 'add view-transition'?

Die CSS-Regel 'add view-transition' wird verwendet, um Cross-Document-View-Transitions zu aktivieren. Sie muss in der CSS-Datei der Seiten, die an einem View-Transition teilnehmen, hinzugefügt werden, um diese Funktion zu ermöglichen. Die Regel muss den Wert 'auto' für die Navigationseigenschaft setzen.

Welche Auswirkungen hat das Blockieren des Renderings auf die Core Web Vitals?

Das Blockieren des Renderings kann dazu führen, dass der Largest Contentful Paint (LCP) verzögert wird, da der Seiteninhalt erst angezeigt wird, wenn bestimmte Elemente vorhanden sind. Auf der anderen Seite kann das Blockieren dazu beitragen, den Cumulative Layout Shift (CLS) zu verbessern, indem instabile Layouts während der Übergänge vermieden werden.

Wie kann das Vorladen von Seiten mit der Speculation Rules API die Leistung verbessern?

Die Speculation Rules API ermöglicht es, Seiten bereits zu laden, während der Benutzer mit der Maus oder beim Hover über einen Link ist. Dies verringert die Ladezeit und sorgt für schnellere und nahezu sofortige Übergänge zwischen Seiten, was die Benutzererfahrung optimiert.

Was ist der Vorteil von View-Transition-Klassen und wie vereinfachen sie den Code?

View-Transition-Klassen ermöglichen es Entwicklern, Animationen auf mehrere Elemente gleichzeitig anzuwenden, ohne für jedes Element eigene CSS-Regeln zu schreiben. Dadurch wird der Code vereinfacht und skalierbar, da nur eine Klasse anstelle vieler einzelner Regeln definiert werden muss.

Was ist der Zweck von View-Transition-Typen und wie helfen sie bei der Anpassung von Animationen?

View-Transition-Typen ermöglichen es, unterschiedliche Animationen für verschiedene Ansichten oder Interaktionen zu definieren. Zum Beispiel können unterschiedliche Animationen für das Navigieren zur nächsten oder vorherigen Seite oder für das Hinzufügen bzw. Entfernen von Elementen in einer Liste angewendet werden. Diese Typen werden nach dem Abschluss der Animation automatisch bereinigt.