アニメーション

このページでは、各コンポーネントが開閉アニメーションにどこまで対応しているか、およびアニメーション実装に使えるフックをまとめます。

コンポーネントサポート

コンポーネント	開閉アニメーション	備考
Popover	対応	data-starting-style / data-ending-style と配置用の CSS 変数を提供します。閉じるアニメーションが終わってから非表示にします。
Tooltip	対応	Popover と同じ、表示・非表示用のフックを提供します。
Collapsible	対応	パネルサイズの CSS 変数と、表示・非表示用のフックを提供します。アニメーションが終わってから hidden を適用します。
Accordion（制御方式）	対応	Collapsible と同じ仕組みを使います。ネイティブの <details> では、ブラウザ標準の ::details-content を利用します。
Dialog	非対応	開閉は即時に行われ、共通の表示・非表示フックはありません。<dialog> に独自の CSS を適用してください。
Tabs	非対応	タブの選択は即時に切り替わります。data-state を使って active / inactive の見た目を指定できます。

対応コンポーネントは data-starting-style と data-ending-style を公開し、時間が有限のアニメーション終了後に内容を隠します。Accordion と Collapsible は計測したパネルサイズも CSS 変数で公開します。

prefers-reduced-motion を利用し、動きを減らす設定にも対応してください。

@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;
  }
}