Mit der View Transition API können Sie das DOM in einem einzigen Schritt aktualisieren und gleichzeitig einen animierten Übergang zwischen den beiden Status generieren.
Diese Art von Übergängen wurde von Entwicklern häufig angefragt, auch von mir. Ich denke, wir haben es geschafft, eine Lösung zu finden, die gute Standardeinstellungen mit Erweiterungs- und Anpassungsmöglichkeiten in Einklang bringt. Das klingt vielleicht so, als würden wir uns selbst auf die Schulter klopfen, aber das Feedback von Entwicklern war entscheidend für die Entwicklung dieser Funktion. Ein früherer Prototyp dieser Funktion war viel weniger flexibel. Nutzer (wie Sie?) haben sich die Zeit genommen, mit den Prototypen zu spielen und Feedback zu geben, was zu einem kompletten Umdenken geführt hat. Vielen Dank!
In unserem Leitfaden finden Sie weitere Informationen zur Funktion und einige Demos. Wenn du der Meinung bist, dass etwas nicht abgedeckt ist, wende dich bitte an mich auf Twitter, Mastodon oder per E-Mail.
Die View Transition API ist derzeit nur in Chrome verfügbar. Glücklicherweise kann sie als progressive Verbesserung verwendet werden. Der Leitfaden enthält eine Hilfsfunktion, die Sie in allen Browsern verwenden können. Die Animation wird jedoch nur in Browsern angezeigt, die Ansichtsübergänge unterstützen.
Wir haben diese Funktion in der CSS-Arbeitsgruppe mit Input von anderen Browseranbietern und unabhängigen Experten entwickelt. Wir wissen nicht, ob und wann andere Browser Ansichtsübergänge übernehmen werden. Behalten Sie aber die Standardposition von Mozilla und die Standardposition von WebKit im Auge.
Aber wir sind noch nicht fertig.
Die Funktion in Chrome 111 ist nur die erste Version. Wir hoffen, dass wir alle Fehler bereits gefunden haben. Sollten Sie aber Probleme feststellen, melden Sie sie bitte unter crbug.com, vorzugsweise mit einer reduzierten Demo. Wenn du mit diesen Plattformen nicht vertraut bist oder sie nicht nutzen möchtest, kannst du dich jederzeit über Twitter, Mastodon oder per E-Mail an mich wenden.
Dieser Release ist ein kleiner, aber hoffentlich nützlicher Teil eines größeren Ganzen. Wir haben bereits einige Erweiterungen dieser Funktion skizziert, damit die heute versendeten Teile zukunftsfähig sind.
Hier ist schon mal ein kleiner Vorgeschmack. Diese sind nicht nach Priorität sortiert (na ja, vielleicht ist die erste für viele Nutzer am wichtigsten). Wir würden uns also über Feedback dazu freuen, welche Ergänzungen für Sie am wichtigsten sind.
Übergänge zwischen Dokumenten
Ich denke, dass die meisten Entwickler sich wünschen, dass wir als Nächstes daran arbeiten. Die gute Nachricht ist: Wir arbeiten bereits daran!
Die View Transitions API wurde so konzipiert, dass sie für Dokumente mit demselben Ursprung verwendet werden kann. Der einzige Unterschied besteht darin, dass nicht startViewTransition die DOM-Statusänderung signalisiert, sondern die Navigation selbst.
Unser Prototyp dazu ist hinter dem Flag chrome://flags/#view-transition-on-navigation versteckt. Hier sind eine sehr einfache Demo und eine komplexere Demo.
Um fortzufahren, müssen wir herausfinden, wie die Umstellung für jede Seite aktiviert wird. Derzeit verwenden wir ein Meta-Tag: <meta name="view-transition" content="same-origin">. Wir sind jedoch der Meinung, dass CSS besser geeignet ist. Außerdem möchten wir es einfacher machen, zu erkennen, von welcher Art von Seite Sie wechseln, und zwar vorzugsweise ohne JavaScript-Code schreiben zu müssen.
Es gibt noch viel zu tun und wir möchten lieber „richtig“ als „schnell“ arbeiten. Die Funktion steht aber definitiv ganz oben auf unserer Prioritätenliste.
Komposition-basierte Animationen
Wir haben uns entschieden, Breite und Höhe von Übergangsgruppen standardmäßig zu animieren, da sich diese so viel einfacher anpassen lassen. Das bedeutet jedoch, dass die Animation im Hauptthread ausgeführt wird, was insbesondere beim Laden der Seite nicht ideal ist.
Wir planen, die Standardanimationen und gängigen Anpassungen zu erkennen und dann als compositorgestützte Animationen neu zu interpretieren, um die Leistung zu steigern.
Bereichsbezogene Übergänge
Derzeit gelten SPA-Übergänge für das gesamte Dokument und es kann jeweils nur eine solche Umstellung ausgeführt werden. Wir möchten eine Funktion einführen, mit der Übergänge auf ein bestimmtes Element beschränkt werden können, damit mehrere Seitenkomponenten unabhängig voneinander Übergänge ausführen können.
So können beispielsweise in einem eingebetteten Videoplayer gleichzeitig mit einem eingebetteten Chat-Widget Ansichtsübergänge verwendet werden.
Verschachtelte Übergangsgruppen
Derzeit sind alle ::view-transition-groups Geschwister. Das ist oft von Vorteil, da sich Ansichten so von einem Container zum anderen bewegen können und Sie sich keine Gedanken über Clipping machen müssen.
Manchmal möchten Sie jedoch, dass eine Ansicht von einem übergeordneten Element abgeschnitten wird, das auch am Übergang beteiligt sein kann.
Wir möchten eine Option untersuchen, mit der eine bestimmte ::view-transition-group in eine andere ::view-transition-group eingefügt wird.
Arten von Übergängen
Jede view-transition-name muss eindeutig sein. So erkennen wir, dass ein bestimmtes Element auf beiden Seiten der DOM-Änderung konzeptionell „dasselbe“ ist, auch wenn es sich nicht buchstäblich um dasselbe Element handelt.
Manchmal sollten jedoch Elemente mit unterschiedlichen view-transition-name dieselbe Art von Animation verwenden. Derzeit bedeutet das, dass Sie für jede view-transition-name eine Auswahlregel hinzufügen müssen.
Wir möchten eine Möglichkeit hinzufügen, Übergangsklassen zu erstellen, um diese Einschränkung zu überwinden.
Nicht sichtbare Elemente ignorieren
Wenn Sie einem Element eine view-transition-name zuweisen, wird es als eigene Gruppe in den Übergang einbezogen. Das ist manchmal nicht ideal. Wenn Sie beispielsweise einer Überschrift ein view-transition-name zuweisen und von einem Status, in dem Sie 2.000 Pixel nach unten gescrollt sind, zu einem Status oben auf der Seite wechseln, wird die Überschrift aus 2.000 Pixeln Entfernung animiert, was zeitlich nicht richtig erscheint.
Stattdessen möchten wir eine Option hinzufügen, mit der ein Element ignoriert wird, als hätte es keine view-transition-name, wenn es sich vollständig außerhalb des Darstellungsbereichs befindet.
Das ist bereits mit JavaScript möglich, indem style.viewTransitionName dynamisch festgelegt wird. Wir sollten aber eine deklarative Lösung dafür haben.
Von requestAnimationFrame gesteuerte Animationen
Über die Web Animations API kannst du bereits Ansichtsübergangsanimationen mit JavaScript erstellen. Manchmal musst du die Dinge aber mit requestAnimationFrame Frame für Frame steuern.
Das ist zwar schon möglich, aber etwas umständlich. In dieser Demo finden Sie einige hilfreiche Tools. Wir möchten es möglichst einfach machen.
Wir gehen dabei in zwei Schritten vor. Erstens: Sie können eine API bereitstellen, um anzugeben, wann die Animation abgeschlossen ist. Zweitens, indem JavaScript-Zugriff auf Pseudoelemente gewährt wird. Dieser zweite Teil kann ziemlich viel Arbeit bedeuten, aber es fühlt sich an, als wäre es langfristig die richtige Entscheidung.
Viel Spaß beim Erstellen von tollen Ansichtsübergängen!
Ich hoffe, dass du diese Funktion genauso spannend findest wie ich. Wenn ihr Feedback habt oder einfach nur eure eigenen Ansichtsübergänge zeigen wollt, die flüssig und funktional oder einfach nur ganz einfach albern sind, schreibt mir auf Twitter oder Mastodon.