😈
detailsタグで作ったアコーディオンをcssで良い感じにアニメーションする（追記あり）
追記※（2024/01/04） いつの間にかChromeでも初回しかアニメーションしなくなってました🥺（v120.0.6099.129） もはやちゃんと動くのはFirefoxだけか…？というわけで残念ながら現時点ではjsでアニメーションした方が良さそうです。さようなら…
追記※Safari、iOSのモバイルブラウザ3種で試したら初回しかアニメーションしなかった…open属性はついてるようなんですけどネ🥺もしかしたらコレのようにWebkitのバグかもしれません…そのうち直ることを祈って
こんばんわ。カレー美味しい。
ところで友人に聞かれたのでdetailsタグとsummaryタグで作るアコーディオンパネル（Q&Aとかに使うやつ）を、アニメーション付きで開閉できるようにしたいと思います😇
details/summaryタグについては以下を参照してください。便利なタグですね〜〜
ポイントは keyframes なアニメーションを使うこと、open属性を活用すること
早速作ってみたのでみてください😇とっても簡潔なhtmlで気持ちがいいですね！
先頭のpolyfillはIE11対策です…IE11はdetails非対応なので…👿（2021/02/16時点）
参考: Can I use... Support tables for HTML5, CSS3, etc
detailsはsummaryをクリックして開くとopen属性がつきます。
open属性がついた時に、keyframesなアニメーションを発動してあげるとええ感じにスライドします。
…説明は苦手なので作ったものをみてくださいね😇では！
Discussion