Snow Monkeyのアコーディオンブロックでは、開閉時のアニメーションは実装されていません。
アニメーションを実装するには、独自にCSSやJSを加える必要がありますが、今回はCSSのみで簡単に開閉する方法を２種類ご紹介したいと思います。
アニメーションをつける２種類の実装方法
以下の２種類の方法をご紹介します。
- gridでアコーディオンを実装
- 従来の方法でアコーディオンを実装
アニメーションをつける方法その①
gridでアコーディオンを実装
/* ===================
アコーディオン開閉アニメーション
====================== */
/* 非表示(親要素) */
.smb-accordion__item:has(.smb-accordion__item__control) {
display: grid!important;
grid-template-rows: min-content 0fr;
transition: grid-template-rows .2s ease-out;
}
/* 表示(親要素) */
.smb-accordion__item:has(.smb-accordion__item__control:checked) {
grid-template-rows: min-content 1fr;
}
/* 非表示(子要素) */
.smb-accordion__item__body:has(*):not(.editor-styles-wrapper .smb-accordion__item__body, .customize-control-sidebar_block_editor .smb-accordion__item__body) {
display: block;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
overflow: hidden;
transition: padding .2s linear, opacity .2s;
}
/* 表示(子要素) */
.smb-accordion .smb-accordion__item__control:checked+.smb-accordion__item__title+.smb-accordion__item__body:has(*) {
padding: var(--_padding1);
opacity:1;
}高さの制御は、親要素と子要素に分かれています。
親要素で指定しているgrid-template-rowsは縦方向のサイズ指定となり、min-contentがタイトル部分、0frがコンテンツ部分に当たります。
チェックボックスにチェックされた時、0frを1frにすることでコンテンツを展開をするという仕組みです。
従来の方法height:0からheight:autoではtransitionは効いてくれませんが、gridのfrはtransitionに対応しているので滑らかに開閉するといったことが出来るんですね…！
子要素では、主にコンテンツの余白（padding）と透明度を指定しています。
非表示のCSSを充てるとエディターでもコンテンツが非表示となってしまうため、:not()をつけてエディターのクラスを除外してます。
メリット：上から下まで滑らかに動く
gridを使う方法では、全ての高さにtransitionを当てることができるので、開閉時のアニメーションを滑らかに動かすことができます。
デメリット：:has()未対応のブラウザでは無効になる
:has()は、2023年6月時点でFirefox未対応となっています。
つまり、対応するまではこのCSSは効かないのでアニメーションは何も起こりません。
どのブラウザでも対応させたい場合は、次の方法（従来の方法）で実装します。
アニメーションをつける方法その②
従来の方法でアコーディオンを実装
/* ===================
アコーディオン開閉アニメーション
====================== */
/* 非表示（エディターでは反映させない） */
.smb-accordion__item__body:not(.editor-styles-wrapper .smb-accordion__item__body, .customize-control-sidebar_block_editor .smb-accordion__item__body) {
display: block;
padding-top: 0;
padding-bottom: 0;
height: 0;
opacity: 0;
overflow: hidden;
transition: padding .2s ease-out, height .2s ease-out, opacity .2s;
}
/* 表示 */
.smb-accordion .smb-accordion__item__control:checked+.smb-accordion__item__title+.smb-accordion__item__body {
padding: var(--_padding1);
height: auto;
opacity:1;
}こちらは従来からよく使われている、CSSのみで開閉するアコーディオンアニメーションです。
非表示のCSSを充てるとエディターでもコンテンツが非表示となってしまうため、:not()をつけてエディターのクラスを除外してます。
メリット：実装が簡単
こちらはコードが単純で分かりやすい、保守しやすいというのがメリットです。
デメリット：height:autoにはtransitionが効かない
欠点として、height:autoにはtransitionが効きません。
そのため、height部分はパッと切り替わり、paddingの部分のみアニメーションが行われるということになります。
height:150pxのように高さを固定してすればtransitionは効きますが、アコーディオンの高さは可変することがほとんどですので実装としては現実的ではありません。
しかし、heightにアニメが無くても動きとしては全く不自然ではなく、むしろキビキビ動いているようにも見えるのでこちらでも全く問題ありません。
まとめ：開閉が分れば良い
テレビアニメの世界でも１から１０まで全ての動きを描いてなくても、「それっぽい」というので成立しているように、アコーディオン開閉でも同じことが言えるのではないでしょうか。
実装で大事なことは、誰が見ても分かりやすいコード、パフォーマンスが悪くさせない事が重要だと思っています。
どちらの方法でも間違えではありませんので、ぜひお好みで実装してみてください。
カスタマイズを自分でしてみませんか？
「あの機能追加したいな」「もう少しここを調整したいな」と思ったらWeb制作のスクール「デイトラ」がおすすめです…！
カリキュラムは３ヶ月分ですが、受講生は卒業後もずっと見放題！常に最新のコンテンツに更新されるため、情報が古くなるなんてこともありません。
価格はどのコースも10万円前後と他のスクールに比べても格安です。
なのに副業・転職に十分なスキルが身につきます。
管理人私はWeb制作とWebデザインを受講し、現在フリーランスWebデザイナーとなりました。
他にも様々なコースが充実しているので、身につけたいスキルがあったら是非覗いてみてください。
コースの一部をご紹介
コメント