Animation

Animate from state

Every state is a discrete, boolean-presence attribute rather than a single data-state token: open/closed is data-open / data-closed, checked/unchecked is data-checked / data-unchecked, and a toggle's pressed state is data-pressed. Target the one you want with a CSS animation or transition.

.content[data-open]   { animation: fade-in  150ms ease; }
.content[data-closed] { animation: fade-out 150ms ease; }

Mount & unmount

By default, overlay popups are removed from the DOM when closed. On open, the popup mounts and its first committed frame carries data-starting-style, the "from" state your CSS transition interpolates away from. On close, the engine keeps the popup mounted, flips it to data-ending-style, and waits for the animation to finish before it unmounts. No KeepMounted is needed for exit animations to run.

Enter & exit

Style the resting (open) state normally, then declare the entering/leaving state under data-starting-style and data-ending-style. A plain CSS transition interpolates between them; because the transition is cancellable mid-flight, rapid open/close feels natural.

@* No KeepMounted needed; the Popup stays mounted through its exit transition. *@
<NaviusDialogPopup class="content">
    ...
</NaviusDialogPopup>

/* resting (open) state */
.content { opacity: 1; transform: scale(1); transition: opacity 150ms ease, transform 150ms ease; }

/* the from-state on open, and the to-state while closing */
.content[data-starting-style],
.content[data-ending-style] { opacity: 0; transform: scale(.96); }

Animating size

CSS can't transition height to auto. For Accordion and Collapsible the engine measures the panel and publishes it as a CSS variable, so you can transition to that value and zero it at the starting/ending phases.

.accordion-panel {
    overflow: hidden;
    height: var(--accordion-panel-height);
    transition: height 200ms ease-out;
}
.accordion-panel[data-starting-style],
.accordion-panel[data-ending-style] { height: 0; }