Limited availability
The finished read-only property of the ViewTransition interface is a Promise that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user.
finished will only reject in the case of a same-document (SPA) transition, if the callback passed to document.startViewTransition() throws or returns a promise that rejects. This would indicate that the new state of the page wasn't created.
If a transition animation fails to start or is skipped during the transition using ViewTransition.skipTransition(), the end state is still reached therefore finished will still fulfill.
A Promise.
Examples Different transitions for different navigationsSometimes certain navigations will require specifically tailored transitions, for example, a "back" navigation may want a different transition to a "forward" navigation. The best way to handle such cases is to set a class name on the <html> element, handle the transition â applying the correct animation using a tailored selector â and then remove the class name once the transition is finished.
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 isn't a built-in feature; it's a theoretical function that could be implemented using the Navigation API or similar.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4