Mit der View Transition API können Sie das DOM in einem einzigen Schritt aktualisieren und dabei einen animierten Übergang zwischen den beiden Zuständen generieren.
Diese Art von Umstellungen wurde von Entwicklern, auch mir, häufig angefragt. Ich denke, wir haben es geschafft, gute Standardeinstellungen sowie Erweiterbarkeit und Anpassungsmöglichkeiten zu bieten. Das klingt, als würden wir uns selbst auf die Schulter klopfen, aber das Feedback des Entwicklers war entscheidend für das Design dieser Funktion. Ein früherer Prototyp dieser Funktion war viel weniger flexibel. Leute (wie Sie), die sich die Zeit genommen haben, mit den Prototypen zu spielen und Feedback zu geben, lösten eine völlige Umdenken aus. Vielen Dank!
In unserem Leitfaden kannst du dich mit der Funktion vertraut machen und einige Demos ausprobieren. Falls Sie zu einem Thema nichts finden, kontaktieren Sie mich bitte auf Twitter, Mastodon oder per E-Mail.
Die View Transition API ist derzeit nur in Chrome verfügbar. Glücklicherweise lässt sie sich schrittweise verbessern. Das Handbuch enthält eine Hilfsfunktion, die Sie in verschiedenen Browsern verwenden können. Die Animation wird jedoch nur in Browsern angezeigt, die Ansichtsübergänge unterstützen.
Wir haben diese Funktion innerhalb der Preisvergleichsportal-Arbeitsgruppe entwickelt und mit Unterstützung anderer Browseranbieter und unabhängigen Anbietern gearbeitet. Wir wissen nicht, ob oder wann andere Browser View Transitions einführen werden, aber behalten Sie die Standardposition von Mozilla und die Standardposition von WebKit im Auge.
Aber wir sind noch nicht fertig!
Die neue Version von Chrome 111 ist erst die erste Version. Wir hoffen, dass wir bereits alle Fehler gefunden haben, aber unter crbug.com können Sie alle gefundenen Probleme melden, vorzugsweise mit einer reduzierten Demoversion. Falls Sie mit diesem Thema nicht vertraut sind, können Sie sich gern auf Twitter, Mastodon oder per E-Mail an mich wenden.
Diese Version ist ein kleiner, aber hoffentlich nützlicher Teil des großen Ganzen. Wir haben bereits einige Erweiterungen dieser Funktion skizziert, um sicherzustellen, dass die Teile, die wir heute ausliefern, auch zukunftskompatibel sind.
Hier ist ein kleiner Vorgeschmack darauf, was wir denken. Diese sind nicht nach Priorität geordnet (vielleicht ist der erste Eintrag für viele Nutzer am wichtigsten), daher würden wir uns über Feedback dazu freuen, welche Ergänzungen für Sie am wichtigsten sind.
Dokumentübergänge
Ich denke, die meisten Entwickler wollen, dass wir als Nächstes daran arbeiten – und die gute Nachricht ist, dass wir bereits daran arbeiten.
Die View Transitions API wurde so entwickelt, dass sie mit Dokumenten desselben Ursprungs funktioniert. Der einzige Unterschied besteht darin, dass nicht startViewTransition die DOM-Statusänderung signalisiert, sondern die Navigation selbst diese Änderung signalisiert.
Unseren Prototyp hinter dem Flag chrome://flags/#view-transition-on-navigation. Hier findest du eine einfache Demo und eine komplexere Demo.
Bevor wir dies fortsetzen können, müssen wir herausfinden, wie die Umstellung für jede Seite aktiviert werden kann. Aktuell verwenden wir das Meta-Tag <meta name="view-transition" content="same-origin">, aber wir sind der Meinung, dass CSS besser dafür geeignet ist. Außerdem möchten wir es einfacher machen, zu erkennen, von welcher Art von Seite Sie wechseln, vorzugsweise ohne JavaScript-Code schreiben zu müssen.
Es gibt viel zu tun, und wir möchten es lieber „richtig“ als „schnell“ machen, aber es ist definitiv eine Priorität für uns.
Compositor-gesteuerte Animationen
Wir haben die Breite und Höhe bei Übergangsgruppen standardmäßig animiert, da die Anpassung viel einfacher ist. Das bedeutet jedoch, dass die Animation im Hauptthread ausgeführt wird, was insbesondere beim Laden von Seiten nicht ideal ist.
Wir planen, die Standardanimationen und häufigen Anpassungen zu erkennen und sie dann als kompositorgesteuerte Animationen neu zu interpretieren, um die Leistung zu steigern.
Bereichsbezogene Umstellungen
Derzeit beziehen sich SPA-Umstellungen auf das gesamte Dokument und es kann jeweils nur eine Umstellung ausgeführt werden. Wir möchten eine Funktion einführen, mit der Übergänge auf ein bestimmtes Element beschränkt werden können, sodass mehrere Seitenkomponenten sie unabhängig voneinander ausführen können.
So könnten beispielsweise bei einem eingebetteten Videoplayer Wiedergabeübergänge gleichzeitig mit einem eingebetteten Chat-Widget verwendet werden.
Verschachtelte Übergangsgruppen
Im Moment sind alle ::view-transition-groups Geschwister. Dies ist oft von Vorteil, da Ansichten von einem Container zu einem anderen übergehen können und Sie sich nicht um das Abschneiden von Daten kümmern müssen.
Manchmal möchten Sie jedoch, dass eine Ansicht von einem übergeordneten Element abgeschnitten wird, das auch an der Umstellung beteiligt sein kann.
Wir möchten eine Opt-in-Funktion untersuchen, mit der eine bestimmte ::view-transition-group innerhalb eines anderen ::view-transition-group platziert wird.
Klassen von Übergängen
Jeder view-transition-name muss eindeutig sein. So stellen wir fest, dass ein bestimmtes Element auf beiden Seiten der DOM-Änderung konzeptionell „gleich“ ist, auch wenn es sich nicht tatsächlich um dasselbe Element handelt.
Manchmal sollte jedoch für Elemente mit unterschiedlichen view-transition-name-Elementen dieselbe Art von Animation verwendet werden. Im Moment bedeutet das, dass Sie für jeden view-transition-name eine Auswahlregel hinzufügen.
Um diese Einschränkung zu umgehen, möchten wir eine Möglichkeit zum Erstellen von Übergangsklassen hinzufügen.
Nicht sichtbare Elemente ignorieren
Wenn Sie einem Element ein view-transition-name zuweisen, ist es als eigene Gruppe an der Umstellung beteiligt. Das ist manchmal nicht ideal. Wenn Sie beispielsweise einem Header einen view-transition-name zuweisen und von einem Status, in dem Sie um 2.000 Pixel nach unten gescrollt haben, zu einem Status oben auf der Seite wechseln, wird der Header animiert, wenn 2.000 Pixel entfernt sind. Das erscheint mir in Bezug auf das Timing falsch.
Stattdessen möchten wir eine Option hinzufügen, bei der ein Element ignoriert wird, so als würde es kein view-transition-name haben, wenn es sich vollständig außerhalb des Darstellungsbereichs befindet.
Sie können dies bereits mit JavaScript tun, indem Sie style.viewTransitionName dynamisch festlegen, aber es scheint, als bräuchten wir dafür eine deklarative Lösung.
requestAnimationFrame-gesteuerte Animationen
Über die Web Animations API können Sie bereits Animationen für Ansichtsübergänge mit JavaScript erstellen, aber manchmal müssen Sie dies Frame für Frame mit requestAnimationFrame steuern.
Das kannst du schon machen, aber es ist ein bisschen kompliziert. Hier finden Sie eine Demo mit einigen hilfreichen Hilfestellungen. Wir wollen sie nicht hacken!
Dies erfolgt in zwei Teilen. Erstens: Durch Bereitstellung einer API, die angibt, wann die Animation abgeschlossen ist. Und zweitens: Durch die Bereitstellung von JavaScript-Zugriff auf Pseudoelemente Der zweite Teil mag eine ziemlich große Aufgabe sein, aber langfristig scheint es das Richtige zu sein.
Machen Sie nun einige großartige Sichtübergänge!
Hoffentlich sind Sie wie ich auf die Gegenwart und Zukunft dieser Funktion gespannt. Falls ihr Feedback habt oder einfach nur die von euch vorgenommenen Ansichtsübergänge zeigen möchtet, ob diese reibungslos und funktional oder einfach nur einfach albern sind, könnt ihr uns über Twitter oder Mastodon kontaktieren.