ViewTransition: finished-Eigenschaft
Baseline
2025
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die schreibgeschützte Eigenschaft finished der ViewTransition-Schnittstelle 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 Falle eines Transitionen im selben Dokument (SPA) abgelehnt, wenn der an document.startViewTransition() übergebene Callback eine Ausnahme auslöst oder ein Promise zurückgibt, das abgelehnt wird. Dies würde darauf hindeuten, dass der neue Zustand der Seite nicht erstellt wurde.
Wenn eine Übergangsanimation beim Übergang fehlschlägt oder übersprungen wird, indem ViewTransition.skipTransition() verwendet wird, wird der Endzustand dennoch erreicht, daher wird finished dennoch erfüllt.
Wert
Ein Promise.
Beispiele
Unterschiedliche Übergänge für unterschiedliche Navigationen
Manchmal erfordern bestimmte Navigationen speziell angepasste Übergänge, zum Beispiel könnte eine "Zurück"-Navigation einen anderen Übergang wünschen als eine "Vorwärts"-Navigation. Der beste Weg, solche Fälle zu handhaben, besteht darin, einen Klassennamen auf dem <html>-Element zu setzen, den Übergang zu behandeln — wobei die korrekte Animation mit einem maßgeschneiderten Selektor angewendet wird — und dann den Klassennamen zu entfernen, sobald der Übergang abgeschlossen ist.
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");
}
}
Hinweis:>isBackNavigation ist keine eingebaute Funktion; es handelt sich um eine theoretische Funktion, die mit der Navigation API oder ähnlich implementiert werden könnte.
Spezifikationen
| Specification |
|---|
| CSS View Transitions Module Level 1 # dom-viewtransition-finished |
Browser-Kompatibilität
Loading…