← Playgrounds一覧に戻る
スタイリング例
同じ破線ボーダーを、summary以外の子要素すべてに当てる方法と::details-contentに1回当てる方法で比較します。
detailsの子要素全てにスタイルを割り当て
p要素1
p要素2
p要素3
::details-contentを用いてslot要素に割り当て
p要素1
p要素2
p要素3
アニメーション実装パターン
interpolate-sizeとheightのtransitionを::details-contentに指定し、JSなしで開閉をなめらかに動かします。
::details-contentによるアニメーション
想定した通りにアニメーションが適用されます
例として実装したアニメーションは@prefers-reduced-motionに対応していません。注意してご利用ください。