Reibungslose Übergänge mit der View Transition API

Bramus

Mit der View Transition API lassen sich nahtlose visuelle Übergänge zwischen verschiedenen Ansichten auf Ihrer Website erstellen. Dadurch wird den Nutzern beim Navigieren auf Ihrer Website ein visuell ansprechenderes Erlebnis geboten, unabhängig davon, ob sie als mehrseitige Anwendung (MPA) oder als Single-Page-Anwendung (SPA) erstellt wurde.

Übergänge bei den Ansichten werden normalerweise in folgenden Fällen verwendet:

• Ein Thumbnail auf einer Seite mit Produkteinträgen, das auf der Produktdetailseite in voller Größe angezeigt wird.
• Eine feste Navigationsleiste, die an Ort und Stelle bleibt, während Sie von einer Seite zur anderen blättern.
• Ein Raster mit Elementen, die sich beim Filtern ihre Positionen bewegen.

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 des Wechsels von Ansichten basieren auf denselben Bausteinen und Prinzipien:

1. Der Browser erstellt Momentaufnahmen 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 Unterschied zwischen den beiden Typen ist die Art und Weise, wie sie ausgelöst werden.

Ansichtsübergänge für dasselbe Dokument

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

Auslösen

Lösen Sie Übergänge für die Ansicht desselben Dokuments 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 bei der Ansicht desselben Dokuments verwendet werden, um die Karten zu animieren, wenn neue hinzugefügt oder entfernt werden.

Gleich mit dem Erstellen loslegen

In der entsprechenden Dokumentationsseite finden Sie alle Informationen zu Übergängen der Ansicht für dasselbe Dokument.

Übergänge für die Ansicht desselben Dokuments erstellen

Dokumentübergreifende Ansichtsübergänge

Wenn ein Ansichtsübergang zwischen zwei verschiedenen Dokumenten stattfindet, wird dies als dokumentübergreifender Ansichtsübergang bezeichnet. Das ist typisch für MPAs. Die dokumentübergreifende Ansichtsübergänge wird in Chrome 126 und höher unterstützt.

Auslösen

Übergänge bei der dokumentübergreifenden Ansicht werden durch eine dokumentübergreifende Navigation am selben Ursprung ausgelöst, sofern beide Seiten aktiviert sind. Mit anderen Worten: Es gibt keine API, die aufgerufen werden muss, um einen dokumentenübergreifenden Ansichtsübergang zu starten. Klickt ein Nutzer auf einen Link, löst der Klick den Übergang der Ansicht aus.

Verwenden Sie das folgende CSS-Snippet:

@view-transition {
  navigation: auto;
}

Beispiel

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

Gleich mit dem Erstellen loslegen

Hier erfahren Sie alles, was Sie über dokumentübergreifende Ansichtsübergänge wissen müssen.

Dokumentübergreifende Ansichtsübergänge erstellen