View Transitions styles view transitions; script controls them. document.startViewTransition() returns a ViewTransition whose ready and finished promises mark the animation's start and end. The types option labels a transition for :active-view-transition-type() in CSS, and skipTransition() skips the animation.
const update = () => (page.textContent = 'Page 2');
const vt = document.startViewTransition({ update, types: ['forward'] });
console.log('forward:', vt.types.has('forward'), 'active:', document.activeViewTransition === vt);
await vt.ready; // snapshots taken
document.documentElement.animate({ transform: ['translateX(100%)', 'none'] },
{ duration: 300, pseudoElement: '::view-transition-new(root)' });
await vt.finished;
console.log(page.textContent, 'finished, active:', document.activeViewTransition);Output
forward: true active: true Page 2 finished, active: null
pseudoElement lets the Web Animations API (Web Animations API) animate with values computed in script. Types and activeViewTransition reached Firefox 147 555 ; still guard with if (!document.startViewTransition).