detailsタグのアニメーションについて - もぐもぐ食べるおいしいWebデザイン。 - もぐでざWordPress6.3でも実装されたdettailsタグ。 これはdetailsのSummaryタグ。 detailsのここが中身。 ↑こんな感じで開閉がCSSやJSを使わずに簡単に実装できる。 しかもアクセシビリティ面も配慮されているのがありがたいところ。 ただ、アニメーションをつけようとすると途端に難易度が上がっちゃう。 いろいろ調べてたどり着いた内容を残しときます。 CSSだけで実装 いちおうCSSだけでアニメーションをつけることは可能。以下は参考コード。 ※こちらの記事を参考に作成しました 属性「open」が付いたときに、animationを使って微妙に位置をずらす+フェードインを使って動きを付けてる。 JSを使わない実装をする場合はこの方法が現状の最適解かな。 ただ、閉じる際にアニメーションが効かない上に、高確率でアニメーションが効かない…。 もう少ししっかり動きをつけたい…。
