v142 · javascript

activeViewTransition property on document

View Transitions API allows developers to start visual transitions between different states. The primary SPA entry point to this is `startViewTransition()` which returns a transition object. This object contains several promises and functionality to track the transition progress, as well as allow manipulations such as skipping the transition or modifying its

concepts

  1. Active VT

    Trigger a real view transition and watch document.activeViewTransition flip from null to a live object and back. Double-click "swap fast" — the guard skips the second call.

  2. Concurrent Navigation Guard

    The real reason the property landed — SPA routers fire navigations faster than transitions can finish. A miniature router uses activeViewTransition to drop racing route clicks instead of letting them cancel the in-flight transition.

  3. External Skip & Observe

    An external module (back-button handler, reduced-motion watcher, telemetry layer) reaches into the live transition via document.activeViewTransition to skipTransition() mid-flight, or attach observers to ready, finished, and updateCallbackDone — without holding the original caller's handle.

  4. Transition Performance Lab

    Click a tile to start a view transition, then watch performance.measure() and a PerformanceObserver capture the frame budget, paint entries, and duration. A "stress test" fires 5 transitions in rapid succession — the concurrent guard skips racing calls and the skipped count appears in the log.

  5. Element-scoped activeViewTransition

    CSS View Transitions Level 2 splits the API into two axes: document.startViewTransition() sets document.activeViewTransition, while element.startViewTransition() sets element.activeViewTransition independently. Click each panel to start a scoped transition and watch which property lights up in the side-by-side readout.

  6. Navigation Queue Strategies

    SPA routers face a race: users click routes faster than view transitions can finish. Two strategies using document.activeViewTransition: drop (ignore racing clicks) and queue-latest (let the current transition finish, then run the most-recent pending navigation). Spam the route buttons and watch the counters.

why it shipped

View Transitions API allows developers to start visual transitions between different states. The primary SPA entry point to this is `startViewTransition()` which returns a transition object. This object contains several promises and functionality to track the transition progress, as well as allow manipulations such as skipping the transition or modifying its

references