Verwendung der View Transition API

Der View-Transition-Prozess

Sehen wir uns den Prozess an, nach dem eine View Transition funktioniert:

1. Eine View Transition wird ausgelöst. Wie dies erfolgt, hängt von der Art der View Transition ab:

   • Bei Übergängen innerhalb desselben Dokuments (SPAs) wird eine View Transition ausgelöst, indem die Funktion, welche die DOM-Aktualisierung für die View-Änderung auslösen würde, als Callback an die Methode document.startViewTransition() übergeben wird, oder im Fall von elementbezogenen View Transitions an element.startViewTransition().
   • Bei dokumentübergreifenden Übergängen (MPAs) wird eine View Transition ausgelöst, indem die Navigation zu einem neuen Dokument initiiert wird. Sowohl das aktuelle als auch das Zieldokument der Navigation müssen denselben Origin haben und sich für die View Transition anmelden, indem sie in ihrem CSS eine At-Regel @view-transition mit einem navigation-Deskriptor von auto enthalten.

     Hinweis: Eine aktive View Transition hat eine zugehörige ViewTransition-Instanz (die bei Übergängen innerhalb desselben Dokuments (SPA) beispielsweise von startViewTransition() zurückgegeben wird). Das ViewTransition-Objekt enthält mehrere Promises, mit denen Sie Code als Reaktion darauf ausführen können, dass verschiedene Phasen des View-Transition-Prozesses erreicht werden. Weitere Informationen finden Sie unter View Transitions mit JavaScript steuern.

2. In der aktuellen (alten) View erstellt die API statische Bild-Snapshots von Elementen, für die innerhalb des View-Transition-Bereichs ein von none verschiedener Wert für view-transition-name deklariert ist. Standardmäßig umfasst der Bereich bei dokumentbezogenen View Transitions das gesamte Dokument und bei elementbezogenen View Transitions das Element, für das startViewTransition() aufgerufen wird, sowie alle seine Nachkommen.

3. Die View-Änderung erfolgt:

   • Bei Übergängen innerhalb desselben Dokuments (SPAs) wird der an startViewTransition() übergebene Callback aufgerufen, wodurch sich das DOM ändert.

     Wenn der Callback erfolgreich ausgeführt wurde, wird das Promise ViewTransition.updateCallbackDone erfüllt, sodass Sie auf die DOM-Aktualisierung reagieren können.

   • Bei dokumentübergreifenden Übergängen (MPAs) erfolgt die Navigation zwischen dem aktuellen und dem Zieldokument.

4. Die API erstellt „Live“-Snapshots (also interaktive DOM-Bereiche) aus der neuen View.

   An diesem Punkt steht die View Transition kurz vor der Ausführung und das Promise ViewTransition.ready wird erfüllt, sodass Sie beispielsweise durch Ausführen einer benutzerdefinierten JavaScript-Animation anstelle der Standardanimation reagieren können.

5. Die alten Snapshots werden herausanimiert, während die neuen Snapshots hineinanimiert werden. Standardmäßig werden die alten Snapshots von opacity 1 auf 0 und die neuen Snapshots von opacity 0 auf 1 animiert, wodurch ein Cross-Fade entsteht.

6. Wenn die Übergangsanimationen ihre Endzustände erreicht haben, werden die Snapshots zerstört und das Promise ViewTransition.finished wird erfüllt, sodass Sie reagieren können. Falls erforderlich, können Sie verhindern, dass eine View Transition ihren Endzustand erreicht, bis ein angegebenes Promise aufgelöst wurde, indem Sie die Methode ViewTransition.waitUntil() verwenden.

Ein Hinweis zu Snapshots

Es ist erwähnenswert, dass wir bei View Transitions üblicherweise den Begriff Snapshot verwenden, um einen Teil des Bereichs zu bezeichnen, für den view-transition-name deklariert ist. Diese Bereiche werden getrennt von anderen Teilen des Bereichs animiert, für die unterschiedliche Werte für view-transition-name gesetzt sind. Während das Animieren eines Snapshots über eine View Transition tatsächlich zwei getrennte Snapshots umfasst — einen des alten und einen des neuen UI-Zustands — verwenden wir der Einfachheit halber den Begriff Snapshot für beide.

Der Snapshot des alten UI-Zustands ist ein statisches Bild, sodass der Benutzer nicht mit ihm interagieren kann, während er herausanimiert wird.

Der Snapshot des neuen UI-Zustands ist ein interaktiver DOM-Bereich, sodass der Benutzer bereits mit dem neuen Inhalt interagieren kann, während er hineinanimiert wird.

Der Pseudo-Element-Baum der View Transition

Um die ausgehenden und eingehenden Übergangsanimationen zu erstellen, konstruiert die API einen Pseudo-Element-Baum mit der folgenden Struktur:

root
  ├─ ::view-transition
  │  └─ ::view-transition-group(root)
  │     └─ ::view-transition-image-pair(root)
  │        ├─ ::view-transition-old(root)
  │        └─ ::view-transition-new(root)
  ├─ head
  └─ body
     └─ …

Bei Übergängen innerhalb desselben Dokuments (SPAs) wird der Pseudo-Element-Baum im Dokument verfügbar gemacht. Bei dokumentbezogenen View Transitions ist das Wurzelelement das <html>-Element. Bei elementbezogenen View Transitions ist das Wurzelelement das Element, für das startViewTransition() aufgerufen wurde.

Bei dokumentübergreifenden Übergängen (MPAs) wird der Pseudo-Element-Baum nur im Zieldokument verfügbar gemacht.

Die interessantesten Teile der Baumstruktur sind folgende:

• ::view-transition ist die Wurzel des View-Transitions-Overlays, das alle View-Transition-Gruppen enthält und über allen anderen Seiteninhalten liegt.

• Ein ::view-transition-group() fungiert als Container für jeden View-Transition-Snapshot. Das Argument root gibt den Standard-Snapshot an — die View-Transition-Animation wird auf den Snapshot angewendet, dessen view-transition-name den Wert root hat. Standardmäßig ist dies ein Snapshot des Elements :root, da die Standard-Browserstile Folgendes definieren:

  css

  :root {
    view-transition-name: root;
  }
  

  Beachten Sie jedoch, dass Seitenautoren dies ändern können, indem sie die obige Einstellung zurücksetzen und view-transition-name: root für ein anderes Element festlegen.

• ::view-transition-old() zielt auf den statischen Snapshot der alten View und ::view-transition-new() auf den Live-Snapshot der neuen View. Beide werden als ersetzter Inhalt gerendert, ebenso wie ein <img> oder <video>. Das bedeutet, dass sie mit Eigenschaften wie object-fit und object-position gestaltet werden können.

Erstellen einer grundlegenden View Transition

Dieser Abschnitt zeigt, wie Sie eine grundlegende View Transition sowohl für SPAs als auch für MPAs erstellen.

Grundlegende SPA-View-Transition

Eine SPA kann Funktionen enthalten, um neue Inhalte abzurufen und das DOM als Reaktion auf ein Ereignis zu aktualisieren, etwa wenn ein Navigationslink angeklickt oder ein Update vom Server übertragen wird.

Unsere View-Transitions-SPA-Demo ist eine einfache Bildergalerie. Sie enthält eine Reihe von <a>-Elementen mit Vorschaubild-<img>-Elementen, die dynamisch mit JavaScript erzeugt werden. Außerdem enthält sie ein <figure>-Element mit einem <figcaption> und einem <img>, das die Bilder der Galerie in voller Größe anzeigt.

Wenn auf ein Vorschaubild geklickt wird, wird die Funktion displayNewImage() über Document.startViewTransition() ausgeführt, wodurch das Bild in voller Größe und die zugehörige Beschriftung innerhalb von <figure> angezeigt werden. Wir haben dies in einer Funktion updateView() gekapselt, die die View Transition API nur aufruft, wenn der Browser sie unterstützt:

function updateView(event) {
  // Handle the difference in whether the event is fired on the <a> or the <img>
  const targetIdentifier = event.target.firstChild || event.target;

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // Fallback for browsers that don't support View Transitions:
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // With View Transitions:
  const transition = document.startViewTransition(() => displayNewImage());
}

Dieser Code reicht aus, um den Übergang zwischen den angezeigten Bildern zu behandeln. Unterstützende Browser zeigen den Wechsel von alten zu neuen Bildern und Beschriftungen als sanften Cross-Fade an, also als Standard-View-Transition. In Browsern ohne Unterstützung funktioniert dies weiterhin, jedoch ohne die ansprechende Animation.

Grundlegende MPA-View-Transition

Beim Erstellen einer dokumentübergreifenden (MPA-)View-Transition ist der Prozess sogar noch einfacher als bei SPAs. JavaScript ist nicht erforderlich, da die View-Aktualisierung durch eine dokumentübergreifende Navigation mit demselben Origin ausgelöst wird und nicht durch eine von JavaScript initiierte DOM-Änderung. Um eine grundlegende MPA-View-Transition zu aktivieren, müssen Sie in das CSS sowohl des aktuellen als auch des Zieldokuments eine At-Regel @view-transition aufnehmen, um diese anzumelden:

@view-transition {
  navigation: auto;
}

Unsere View-Transitions-MPA-Demo zeigt diese At-Regel in Aktion und demonstriert außerdem, wie Sie die ausgehenden und eingehenden Animationen der View Transition anpassen können.

Anpassen Ihrer Animationen

Für die Pseudo-Elemente der View Transitions werden standardmäßig CSS-Animationen angewendet, die auf ihren Referenzseiten detailliert beschrieben sind.

Wie oben erwähnt, erhalten die meisten Darstellungsübergänge standardmäßig eine sanfte Cross-Fade-Animation. Es gibt einige Ausnahmen:

• Auf height- und width-Übergänge wird eine sanfte Skalierungsanimation angewendet.
• Auf position- und transform-Übergänge wird eine sanfte Bewegungsanimation angewendet.

Sie können die Standardanimationen mit normalem CSS beliebig verändern — sprechen Sie die Animation „von“ mit ::view-transition-old() und die Animation „zu“ mit ::view-transition-new() an.

Um beispielsweise die Geschwindigkeit beider zu ändern:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

Es wird empfohlen, in Fällen, in denen Sie diese Stile auf ::view-transition-old() und ::view-transition-new() anwenden möchten, ::view-transition-group() anzusprechen. Aufgrund der Pseudo-Element-Hierarchie und der Standardstile des User-Agent werden die Stile von beiden geerbt. Beispiel:

::view-transition-group(root) {
  animation-duration: 0.5s;
}