Reibungslose Übergänge mit der View Transition API

Mit der View Transition API können Sie nahtlose visuelle Übergänge zwischen verschiedenen Ansichten Ihrer Website erstellen. Dadurch wird die Nutzererfahrung beim Navigieren durch Ihre Website visuell ansprechender, unabhängig davon, ob sie als mehrseitige App (MPA) oder als Single-Page-Anwendung (SPA) entwickelt wurde.

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

• Eine Miniaturansicht auf einer Seite mit Produktinformationen, die auf der Seite mit den Produktdetails zu einem Produktbild in voller Größe übergeht.
• Eine fixierte Navigationsleiste, die an Ort und Stelle bleibt, wenn Sie von einer Seite zur anderen navigieren.
• Ein Raster mit Elementen, die sich beim Filtern die Position ändern.

<ph type="x-smartling-placeholder">

</ph>

---

Übergänge bei Ansichten 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 Ansichtenübergängen basieren auf denselben Bausteinen und Prinzipien:

1. Der Browser erstellt Snapshots des alten und des neuen Status.
2. Das DOM wird aktualisiert, während das Rendering unterdrückt wird.
3. Die Übergänge werden von CSS Animations unterstützt.

Der einzige Unterschied zwischen den beiden Typen ist die Art und Weise, wie sie ausgelöst werden.

---

Übergänge bei der Ansicht für dasselbe Dokument

Wenn ein Ansichtsübergang für ein einzelnes Dokument ausgeführt wird, wird dies als Übergang für Ansichten im selben Dokument bezeichnet. Dies ist in der Regel bei Single-Page-Anwendungen (SPAs) der Fall. Übergänge zwischen der Ansicht für das gleiche Dokument werden in Chrome ab Chrome 111 unterstützt.

Trigger

Lösen Sie eine Umstellung auf die Ansicht für dasselbe Dokument durch Aufrufen von document.startViewTransition aus:

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, bei der Übergänge in der Ansicht des gleichen Dokuments verwendet werden, um die Karten zu animieren, wenn neue Karten hinzugefügt oder entfernt werden.

<ph type="x-smartling-placeholder">

</ph>

Gleich mit dem Erstellen loslegen

Auf der entsprechenden Dokumentationsseite finden Sie alles Wissenswerte zum Wechsel zwischen Ansicht des gleichen Dokuments.

Übergänge zur Ansicht für dasselbe Dokument erstellen

---

Dokumentenübergreifende Übergänge bei der Ansicht

Ein Aufrufübergang zwischen zwei verschiedenen Dokumenten wird als dokumentübergreifender Übergang bezeichnet. Dies ist typisch für MPAs. Übergänge zwischen dokumentübergreifenden Ansichten werden ab Chrome 126 unterstützt.

Trigger

Übergänge zwischen dokumentübergreifenden Ansichten werden durch eine dokumentübergreifende Navigation vom selben Ursprung ausgelöst, wenn beide Seiten aktiviert sind. Mit anderen Worten: Es gibt keine API, die aufgerufen werden kann, um einen Übergang der dokumentübergreifenden Ansicht zu starten. Wenn ein Nutzer auf einen Link klickt, löst der Klick den Aufrufübergang aus.

Verwenden Sie dazu das folgende CSS-Snippet:

@view-transition {
  navigation: auto;
}

Beispiel

Das folgende Stack Navigator-Beispiel ist eine MPA, die dokumentübergreifende Übergänge zwischen zwei verschiedenen Dokumenten verwendet. Je nachdem, ob Sie tiefer in die Navigation einsteigen oder nicht, werden Seiten in den Stack verschoben oder springen ab.

<ph type="x-smartling-placeholder">

</ph>

Gleich mit dem Erstellen loslegen

Hier erfahren Sie alles Wissenswerte zu dokumentübergreifenden Ansichten.

Dokumentübergreifende Ansichtsübergänge erstellen