ViewTransition: finished property - Web APIs | MDN
Value
A Promise.
Examples
Different transitions for different navigations
Sometimes 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.
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 isn't a built-in feature; it's a theoretical function that could be implemented using the Navigation API or similar.
Specifications
| Specification |
|---|
| CSS View Transitions Module Level 1 # dom-viewtransition-finished |