CSSのみで作るアコーディオンにアニメーションを付ける方法

サンプル

こんなのが作れます｡

一方で

よく紹介されてる方法だと､アニメーションが付いてないものが多いと思います｡

この､アニメーション無しのものはdisplay: none;display: block;を切り替えるのに対し､
今回紹介するアニメーション付きのものはmax-heightの切り替えによってアニメーションさせています｡

なので予め､大きく見積もって「大体これくらいの高さかな」max-height: 1000px;といった具合に､指定しておく必要があります｡

アコーディオン内の要素に増減が発生しない場合､今回紹介するmax-heightを使用した方法でも大丈夫ですが
アコーディオン内の要素が増減する可能性がある場合､アニメーション無しのdisplay: none;display: block;の切り替えの方が向いているとも思います｡

CSSだけでは限界もあるので､適切な方法を使いましょう｡

HTML

HTMLはこんな感じ｡

<input id="input" type="checkbox" class="input" hidden>
<label for="input">メニューを開く</label>
<div class="contents">
	<ul>
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
		<li>メニュー4</li>
		<li>メニュー5</li>
	</ul>
</div>

チェックボックス､label､アコーディオンの3つを､この順番で並列に並べてください｡

<div class="contents">の中に､アコーディオンにしたい要素を入れていください｡

CSS

肝心のCSSですが､最低限書くとこんな感じ｡

.contents {
	max-height: 0;
	overflow: hidden;
	transition: max-height .5s; /* アニメーションの長さ */
}
/* checkboxにチェックされているときの.contents */
.input:checked + label + .contents {
	max-height: 300px; /* アコーディオン内の高さを多めに見積もった値を入れる */
}

4行目で､アニメーションの長さを設定できます｡

そして肝心なのが､8行目です｡

アコーディオンが開いた状態の高さを､少し多めに見積もって設定してください｡

この値が小さいと､アコーディオンが見切れてしまう可能性があります｡
(メニュー10まであります)

アニメーション無しの方法

冒頭でも述べましたがmax-heightを用いた方法にはデメリットもあるので
アニメーション無しのdisplay: none;display: block;の方法も一応書いておきます｡

HTMLは先程と同様で

CSSはこんな感じ｡

.contents {
	display: none;
}
.input:checked + label + .contents {
	display: block;
}

コメント