View Transitions API 🍹 HTMLcat

The View Transition API lets the browser animate between DOM states. You update the view inside document.startViewTransition(), then style the snapshots in CSS.

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

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

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