Reibungslose Übergänge mit der View Transition API

Bramus

Mit der View Transition API können Sie nahtlose visuelle Übergänge zwischen verschiedenen Ansichten auf Ihrer Website erstellen. So wird die Nutzerfreundlichkeit Ihrer Website verbessert, unabhängig davon, ob sie als MPA (Multi-Page-Anwendung) oder SPA (Single-Page-Anwendung) konzipiert ist.

Typische Situationen, in denen Sie Ansichtsübergänge verwenden würden:

• Ein Vorschaubild auf einer Produktlistenseite, das auf der Produktdetailseite in ein Produktbild in voller Größe übergeht.
• Eine fixierte Navigationsleiste, die beim Wechsel von einer Seite zur nächsten an derselben Stelle bleibt.
• Ein Raster mit Elementen, die ihre Position ändern, wenn Sie filtern.

Ansichtsübergänge implementieren

Ansichtsübergänge sind nicht an eine bestimmte Anwendungsarchitektur oder ein bestimmtes Framework gebunden und können nicht nur für ein einzelnes Dokument, sondern auch zwischen zwei verschiedenen Dokumenten ausgelöst werden.

Beide Arten von Ansichtsübergängen basieren auf denselben Bausteinen und Prinzipien:

1. Der Browser erstellt Snapshots des alten und des neuen Zustands.
2. Das DOM wird aktualisiert, während das Rendern unterdrückt wird.
3. Die Übergänge werden durch CSS-Animationen ermöglicht.

Der einzige Unterschied zwischen den beiden Typen besteht darin, wie Sie sie auslösen.

Übergänge in der Ansicht desselben Dokuments

Wenn eine Ansichtsübergang auf einem einzelnen Dokument ausgeführt wird, spricht man von einem Ansichtsübergang im selben Dokument. Das ist in der Regel bei Single-Page-Anwendungen (SPAs) der Fall. Ansichtsübergänge im selben Dokument werden in Chrome ab Chrome 111 unterstützt.

So wird der Trigger ausgelöst

Sie können Übergänge in einem Dokument auslösen, indem Sie document.startViewTransition aufrufen:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

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

Beispiel

Das folgende Beispiel für Karten ist eine SPA, in der Ansichtsübergänge im selben Dokument verwendet werden, um die Karten zu animieren, wenn neue hinzugefügt oder entfernt werden.

Gleich mit dem Erstellen loslegen

Auf der entsprechenden Dokumentationsseite finden Sie alle Informationen zu Ansichtsübergängen im selben Dokument.

Ansichtsübergänge im selben Dokument erstellen

Dokumentübergreifende Ansichtsübergänge

Wenn ein Ansichtsübergang zwischen zwei verschiedenen Dokumenten erfolgt, spricht man von einem Ansichtsübergang zwischen Dokumenten. Das ist typisch für MPA. Dokumentübergreifende Ansichtsübergänge werden in Chrome 126 und höher unterstützt.

So wird der Trigger ausgelöst

Dokumentübergreifende Ansichtsübergänge werden durch eine dokumentübergreifende Navigation mit demselben Ursprung ausgelöst, wenn beide Seiten aktiviert sind. Mit anderen Worten: Es gibt keine API, die aufgerufen werden kann, um einen dokumentübergreifenden Ansichtsübergang zu starten. Wenn ein Nutzer auf einen Link klickt, wird durch den Klick der Ansichtsübergang ausgelöst.

Verwenden Sie das folgende CSS-Snippet, um die Funktion zu aktivieren:

@view-transition {
  navigation: auto;
}

Beispiel

Das folgende Stack Navigator-Beispiel ist eine MPA, die Übergänge zwischen zwei verschiedenen Dokumenten verwendet. Je nachdem, ob Sie tiefer in die Navigation einsteigen oder nicht, werden Seiten auf den Stapel gelegt oder vom Stapel entfernt.

Gleich mit dem Erstellen loslegen

Hier finden Sie alle Informationen zu Ansichtsübergängen zwischen Dokumenten.

Dokumentübergreifende Ansichtsübergänge erstellen