Web API for seamless transition between page views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).
Same-Document
Prior to Firefox 144, this was not supported in Firefox, while Chrome was supporting this since version 111.
They can be triggered using document.startViewTransition:
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}Cross Document
Cross-document view transitions are triggered by a same-origin cross-document navigation, if both pages opted in. There is no API to call to start a cross-document view transition. When a user clicks a link, the click triggers the view transition.
To opt in, use the following CSS snippet:
@view-transition {
navigation: auto;
}This is not yet supported in Firefox.