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. Das sorgt für eine visuell ansprechendere Nutzererfahrung, unabhängig davon, ob es sich um eine mehrseitige Anwendung (Multi-Page-Anwendung, MPA) oder eine Single-Page-Anwendung (SPA) handelt.

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

  • Ein Thumbnail-Bild auf einer Produktlistenseite, das auf der Produktdetailseite in ein Produktbild in Originalgröße übergeht.
  • Eine fixierte Navigationsleiste, die an Ort und Stelle bleibt, wenn Sie von einer Seite zur nächsten wechseln.
  • Ein Raster mit Elementen, die sich beim Filtern verschieben.
Übergänge, die mit der View Transition API erstellt wurden. Demo-Website ausprobieren Erfordert Chrome 111 oder höher.

Ansichtsübergänge implementieren

Ansichtsübergänge sind nicht an eine bestimmte Anwendungsarchitektur oder ein bestimmtes Framework gebunden und können nicht nur in einem einzelnen 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 Rendering unterdrückt wird.
  3. Die Übergänge werden durch CSS-Animationen unterstützt.

Der einzige Unterschied zwischen den beiden Typen besteht darin, wie sie ausgelöst werden.

Ansichtsübergänge im selben Dokument

Wenn ein Ansichtsübergang in einem einzelnen Dokument ausgeführt wird, wird er als Ansichtsübergang im selben Dokument bezeichnet. Das ist in der Regel bei Single-Page-Anwendungen (SPAs) der Fall. In Chrome 111 und höher werden Übergänge zwischen Ansichten desselben Dokuments unterstützt.

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: Nicht unterstützt.
  • Safari: 18.

Quelle

Auslöser

So lösen Sie Ansichtsübergänge innerhalb desselben Dokuments aus, 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 Kartenbeispiel ist eine SPA, bei der Ansichtsübergänge im selben Dokument verwendet werden, um die Karten zu animieren, wenn neue hinzugefügt oder entfernt werden.

Aufzeichnung der Demo für Karten. Erfordert Chrome 111 oder höher.

Gleich mit dem Erstellen loslegen

Auf der entsprechenden Dokumentationsseite finden Sie alle Informationen zu Übergängen zwischen Ansichten desselben Dokuments.

Übergänge zwischen Ansichten desselben Dokuments erstellen

Ansichtsübergänge zwischen Dokumenten

Wenn ein Ansichtsübergang zwischen zwei verschiedenen Dokumenten erfolgt, wird dies als dokumentübergreifender Ansichtsübergang bezeichnet. Das ist typisch für MPAs. Ansichtsübergänge zwischen Dokumenten werden ab Chrome 126 unterstützt.

Unterstützte Browser

  • Chrome: 126.
  • Edge: 126.
  • Firefox: Nicht unterstützt.
  • Safari Technology Preview: unterstützt

Auslöser

Ansichtsübergänge zwischen Dokumenten werden durch eine ursprungsübergreifende Navigation zwischen Dokumenten 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 der Ansichtsübergang ausgelöst.

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

@view-transition {
  navigation: auto;
}

Beispiel

Das folgende Beispiel für einen Stack Navigator ist ein MPA, das ansichtenübergreifende Übergänge zwischen zwei verschiedenen Dokumenten verwendet. Je nachdem, ob Sie tiefer in die Navigation einsteigen oder nicht, werden Seiten in den Stapel geschoben oder herausgeschoben.

Aufzeichnung der Demo für den Stack Navigator. Erfordert Chrome 126 oder höher.

Gleich mit dem Erstellen loslegen

Hier finden Sie alle Informationen zu Dokumentenansichten.

Dokumentübergreifende Ansichtsübergänge erstellen