はじめに
みなさんは、<details> 要素と <summary> 要素を使ってアコーディオンを作ることがあると思います。
しかし、開閉にアニメーションを付けようとすると、JavaScript を書いたり、div でラップしたりと実装が少し複雑になりがちです。
最近では CSS の transition-behavior が使えるようになり、純粋な CSS だけで滑らかなアニメーションを実現できるようになりました。
そこでこの記事では、CSS の transition-behavior と ::details-content を使って、
自然で気持ちいいアコーディオンアニメーション を実現する方法を紹介します。
開閉アニメーションするアコーディオン
See the Pen Accordion アニメーション by degudegu2510 | Qiita (@degudegu2510) on CodePen.
HTML
<details>
<summary>アコーディオン</summary>
このアコーディオンでは、機能の使い方や注意点をまとめています。初めて利用する方でも迷わず操作できるよう、シンプルな手順とポイントを記載しています。
</details>
<details> 要素はアコーディオン全体を構成するコンテナで、
その中にある <summary> 要素が開閉を行うためのクリック可能な見出し部分になります。
そして、<summary> の後に続くテキストや要素が、アコーディオンを開いたときに表示されるコンテンツとして扱われます。
CSS
⚪︎ アコーディオンのスタイル
details {
background-color: rgb(128 128 128 / .3);
border: 1px solid rgb(128 128 128 / .5);
border-radius: 8px;
}
summary {
padding: 16px;
cursor: pointer;
}
details[open]::details-content {
border-top: 1px solid rgb(128 128 128 / .5);
height: auto;
padding: 16px;
}
<details>要素に対して背景色・枠線・角丸を指定し、カードっぽい見た目にしています。
また、<summary>要素にpaddingとcursor: pointer;を設定し、クリックしやすくしています。
そして、details[open]::details-content で、アコーディオンが開いている状態のスタイルを指定します。
⚪︎ ::details-content とアニメーションの設定
body {
interpolate-size: allow-keywords;
}
details::details-content {
border-top: 0px solid rgb(128 128 128 / .5);
padding: 0 16px;
overflow: clip;
height: 0;
transition:
height 400ms ease,
border 400ms ease,
content-visibility 400ms ease allow-discrete;
}
details[open]::details-content {
border-top: 1px solid rgb(128 128 128 / .5);
height: auto;
padding: 16px;
}
body に指定している interpolate-size によって、height: 0; から height: auto; への変化をスムーズに補間し、高さが自然にアニメーションするようにしています。
また、overflow: clip; を指定することで、アニメーション中に内部のテキストがはみ出して表示されてしまうのを防いでいます。
さらに、transition: プロパティでは、アニメーションさせたい項目と、その時間・イージングをまとめて指定しています。
加えて、content-visibility 400ms ease allow-discrete; の部分で、allow-discreteを指定することで、表示・非表示といった離散的なアニメションプロパティがトランジションが開始するようにして、自然な動きになるよう調整しています。
詳しくは、以下のリンクを参照してください
まとめ
<details> / <summary> は、HTMLだけで手軽にアコーディオンを作れる便利な要素です。
従来は滑らかなアニメーションを付けるために JavaScript やラッパー要素が必要でしたが、
transition-behavior や ::details-content、interpolate-size といった最新の CSS 機能を組み合わせることで、
純粋な CSS だけで自然な開閉アニメーションを実現できるようになりました。
構造を汚さず、アクセシブルで、メンテナンス性も高い実装なので、
今後アコーディオンを作る際の新しい選択肢として試してみてください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。