【Snow Monkey】CSSのみでアコーディオンにアニメーションをつける方法

【Snow Monkey】CSSのみでアコーディオンにアニメーションをつける方法

Snow Monkeyのアコーディオンブロックでは、開閉時のアニメーションは実装されていません。

アニメーションを実装するには、独自にCSSやJSを加える必要がありますが、今回はCSSのみで簡単に開閉する方法を2種類ご紹介したいと思います。

目次

アニメーションをつける2種類の実装方法

以下の2種類の方法をご紹介します。

  1. gridでアコーディオンを実装
  2. 従来の方法でアコーディオンを実装

アニメーションをつける方法その①
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;
	min-height: 0.1px; /* 高さが0だとスクリーンリーダーに認識されなくなるため */
	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がコンテンツ部分に当たります。

チェックボックスにチェックされた時、0fr1frにすることでコンテンツを展開をするという仕組みです。

「fr」はtransitionが効く

従来の方法height:0からheight:autoではtransitionは効いてくれませんが、gridのfrはtransitionに対応しているので滑らかに開閉するといったことが出来るんですね…!

子要素では、主にコンテンツの余白(padding)と透明度を指定しています。

非表示のCSSを充てるとエディターでもコンテンツが非表示となってしまうため、:not()をつけてエディターのクラスを除外してます。

メリット:上から下まで滑らかに動く

gridを使う方法では、全ての高さにtransitionを当てることができるので、開閉時のアニメーションを滑らかに動かすことができます。

デメリット::has()未対応のブラウザでは無効になる

:has()は、Firefoxが2023年12月に対応されたばかりです。

古いブラウザでは無効になることに注意です。

アニメーションをつける方法その②
従来の方法でアコーディオンを実装

/* ===================
アコーディオン開閉アニメーション
====================== */
/* 非表示(エディターでは反映させない) */
.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にアニメが無くても動きとしては全く不自然ではなく、むしろキビキビ動いているようにも見えるのでこちらでも全く問題ありません。

まとめ:開閉が分れば良い

テレビアニメの世界でも1から10まで全ての動きを描いてなくても、「それっぽい」というので成立しているように、アコーディオン開閉でも同じことが言えるのではないでしょうか。

実装で大事なことは、誰が見ても分かりやすいコード、パフォーマンスが悪くさせない事が重要だと思っています。

どちらの方法でも間違えではありませんので、ぜひお好みで実装してみてください。

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ!
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

役に立ったら他の方にシェア

お気軽にコメントどうぞ

コメントする

目次