Add a page transition as a progressive enhancement

Treat a page or view transition as an optional enhancement around a working update. The user should reach the same content when the API is unavailable or reduced motion is active. Keep navigation, focus, and browser history correct before adding a visual transition.

Feature-detect rather than assume support

function updateView(update) {
  const reduced = window.matchMedia(
    '(prefers-reduced-motion: reduce)'
  ).matches;
  if (reduced || !document.startViewTransition) {
    update();
    return;
  }
  return document.startViewTransition(update);
}

This browser-only example wraps a synchronous DOM update. Framework updates may need their own integration to ensure the callback commits the new view at the right time. Check the current MDN documentation and your framework’s supported approach rather than copying this fragment into routing code blindly.

Keep the fallback styles complete

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

Normal layout and content must exist independently of the snapshots. Do not use an animation to reveal text that would otherwise stay hidden.

Separate visual continuity from navigation

A transition between two filters on one page has different history and focus needs from navigating to a new route. A visual snapshot does not update the document title, establish a canonical URL, or move focus appropriately. Handle those concerns through your actual application behavior.

Test without the enhancement

Disable the API path and repeat the task. If the interaction fails, the transition has become a dependency. Fix that before refining the effect. Avoid promising universal browser behavior; support changes, and the feature should remain optional even when widely available.