CSSのtransitionとJavaScriptを使ってアコーディオンメニューを実装する時の注意点。heightの罠…

こんにちは、ケインコスゲです。

本日もニッチではあるのですが、CSSのtransitionとJavaScriptを使ってアコーディオンメニューを実装する時の注意点について書いてみたいと思います。

とはいえ、この話結構昔からあるネタのようなのですが・・・最近まで僕はこの壁にたまたまあたったことがなかったので、知りませんでした。笑

CSSのtransitionとJavaScriptを使ってアコーディオンメニューを実装する方法

まずは完成形のコードについて記載してみたいと思います。

CSSのtransitionプロパティを活用して、max-heightを通常時は0、class「open」を追加した時には300px、このようにCSSの設定を行なっています。

あとは、JavaScript側でアコーディオンメニューに対して、class=”open”を付けたり外したりする動きを設定しています。

別案としては、CSSのtransformプロパティのscaleという拡大縮小をすることができるためのものを使用して、通常時はscaleY(0)で見えなくし、class=”open”をつけた時にはscale=”1″をつけて通常の表示状態にする、という方法です。

この方法においても、あとは、JavaScript側でアコーディオンメニューに対して、class=”open”を付けたり外したりする動きを設定しているのは同じです。

この手の動きをやろうとしたときに、よくあるのがCSSのheightプロパティを使って実装をしようとする方法です。

結論からいうと、この方法ではアニメーションっぽくならずに、パッとメニューが表示されて、パッとメニューが消えるという形にしかなりません。

これはおそらくそういう仕様なんだと思うのですが、いずれにしてもCSSのtransitionを活用してアコーディオンメニューを実装しようとすると、heightでの実装ができないようです。

jQueryなどを使う場合は、slideToggle()というメソッド（命令）があるので、それで解決するんですけどね・・・

ということで、今回はCSSのtransitionとJavaScriptを使ってアコーディオンメニューを実装する時の注意点。heightの罠…についてご紹介させていただきました！

jQueryを使ってもいいのであればjQueryを使用するなど、柔軟に対処していきたいところですね！