Animation

This page summarizes how much each component supports enter/exit animation and the hooks available for implementing it.

Component support

Component	Animation lifecycle	Notes
Popover	Yes	data-starting-style / data-ending-style, positioning variables, and waits for finite content animations before hiding.
Tooltip	Yes	Same hooks as Popover for content enter and exit transitions.
Collapsible	Yes	Panel size CSS variables, starting/ending style hooks, and hidden is deferred until finite panel animations finish.
Accordion (managed items)	Yes	Same panel lifecycle as Collapsible. Native <details> items use the browser’s ::details-content animation model instead.
Dialog	No	Opens and closes immediately; no shared starting/ending style contract. Style the native <dialog> with your own CSS.
Tabs	No	Selection changes immediately; no exit animation lifecycle. Style active/inactive states with data-state.

Lifecycle-enabled components expose data-starting-style and data-ending-style, then wait for finite animations before hiding content. Accordion and Collapsible also expose measured panel-size CSS variables.

Respect prefers-reduced-motion in application styles:

@media (prefers-reduced-motion: reduce) {
  [data-popover-content],
  [data-tooltip-content],
  [data-collapsible-panel],
  [data-accordion-panel] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}