demo · v131

animation hook: beforetoggle + @starting-style

Before beforetoggle existed, animating dialog open/close meant a chain of mutation observers or requestAnimationFrame dances. Now beforetoggle fires synchronously before the state flips — perfect for adding a transition class — and toggle fires after the transition resolves. Combine with @starting-style for fully declarative entry animations.

240 ms

animated dialog

This dialog uses @starting-style for the entry and allow-discrete on display and overlay so it animates closed too. The beforetoggle and toggle events tell our UI when to enable the "close" button outside the modal.

current state

closed

Tracked entirely from beforetoggle + toggle — no open attribute mutation observer needed.

event timeline

the api

dialog.style.setProperty("--t", `${speed}ms`);

dialog.addEventListener("beforetoggle", (e) => {
  // fires BEFORE the state flips — perfect for adding a transition class
  dialog.classList.toggle("opening", e.newState === "open");
});

dialog.addEventListener("toggle", (e) => {
  // fires AFTER the transition lands — safe to read final layout
  dialog.classList.remove("opening");
});

see also