ViewTransition: finished property

Limited availability

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

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.

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

Browser compatibility

BCD tables only load in the browser

See also