Sanfte Übergänge mit View Transition API

Neben Popover API in Kombination mit Anchor Positioning gehört die View Transition API zu meinen Favoriten neuerer Web-Features der letzten Jahre.

Diese API ist ein echter Gamechanger, wenn es darum geht, Übergänge mit CSS und etwas JavaScript zu animieren. Und weißt du was? Sie wird von den meisten wichtigen Browsern unterstützt, bis auf Firefox.

Ich habe View Transitions jetzt auch auf dieser Website eingebaut. Schau mal, wie sich die Blog-Post-Überschriften verhält, wenn du von der Blog-Übersichtsseite zur Blog-Artikel-Seite wechselst. Oder wie sich die Linie des aktuellen Website-Bereichs in der Navigation bewegt, wenn du zum Beispiel von „Start“ nach „Blog“ gehst. Oder in den Projekten:

Für eine Einführung in das Thema, empfehle ich die Artikel von Chrome.

tryStartViewTransition()

Ich habe mir selbst eine Helfer-Funktion erstellt, um document.startViewTransition() nur dann auszuführen, wenn der Browser unterstützt wird:

function tryStartViewTransition(callback) {
    // Fallback for browsers that don't support this API:
    if (!document.startViewTransition) {
        callback()
        return
    }

    // With a View Transition:
    document.startViewTransition(() => callback())
}

In meinem Artikel Flickern zwischen Seitenwechsel verhindern habe ich eine Funktion namens goTo() vorgestellt, die ich auf meiner Website verwende. Damit die View Transition API beim Navigieren verwendet werden kann, sieht der Aufruf jetzt so aus:

tryStartViewTransition(() => goTo(href, true))