ViewTransition: finished-Eigenschaft

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die schreibgeschützte Eigenschaft finished des ViewTransition-Interfaces ist ein Promise, das erfüllt wird, sobald die Übergangsanimation abgeschlossen ist und die neue Seitenansicht für den Benutzer sichtbar und interaktiv ist.

finished wird nur im Fall eines Übergangs im selben Dokument (SPA) abgelehnt, wenn der Callback, der an document.startViewTransition() übergeben wird, einen Fehler wirft oder ein Promise zurückgibt, das abgelehnt wird. Dies würde darauf hinweisen, dass der neue Zustand der Seite nicht erstellt wurde.

Wenn eine Übergangsanimation nicht startet oder während des Übergangs mit ViewTransition.skipTransition() übersprungen wird, wird der Endzustand trotzdem erreicht, und finished wird erfüllt.

Wert

Ein Promise.

Beispiele

Unterschiedliche Übergänge für verschiedene Navigationsarten

Manchmal erfordern bestimmte Navigationsarten speziell zugeschnittene Übergänge. Beispielsweise kann eine "Zurück"-Navigation einen anderen Übergang als eine "Vorwärts"-Navigation wünschen. Der beste Weg, solche Fälle zu handhaben, besteht darin, einen Klassennamen auf das <html>-Element zu setzen, den Übergang durchzuführen — die richtige Animation mit einem zugeschnittenen Selektor anzuwenden — und dann den Klassennamen zu entfernen, sobald der Übergang abgeschlossen ist.

js
async function handleTransition() {
  if (isBackNavigation) {
    document.documentElement.classList.add("back-transition");
  }

  const transition = document.startViewTransition(() =>
    updateTheDOMSomehow(data),
  );

  try {
    await transition.finished;
  } finally {
    document.documentElement.classList.remove("back-transition");
  }
}

Note: isBackNavigation ist keine eingebaute Funktion; es handelt sich um eine theoretische Funktion, die mithilfe der Navigation API oder einer ähnlichen implementiert werden könnte.

Spezifikationen

Specification
CSS View Transitions Module Level 1
# dom-viewtransition-finished

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch