View Transitions API

Newly available Reference ↗

The browser can animate snapshots between two DOM states. Your code still updates the view; startViewTransition() coordinates the visual handoff.

const update = () => {
  document.documentElement.classList.toggle('details-open');
};

if (document.startViewTransition) {
  document.startViewTransition(update);
} else {
  update();
}

::view-transition-group(root) {
  animation-duration: .25s;
}

The fallback is the DOM update itself. Keep transitions short, avoid hiding state changes, and respect reduced-motion preferences.