.slideToggle()で簡単にアコーディオンメニューを実装しようとしたときになぜかカクついていました。
ガクガクになっています…。
初めての現象だったので少し戸惑ったのですが、簡単に解決できました。
同じような現象に出会った方の参考になればと思います。
.slideToggle()とは？
.slideToggleは指定した要素をスライドダウン・スライドアップのアニメーションで表示・非表示してくれるメソッドになります。
.slideToggle([speed], [callback])
通常だと次のように動きます。
ここをクリックしてください。ですが、今回はなぜかカクカクしていました。
原因
どうやらtransition: all 1s;で指定されていたことが原因のようです。
検証ツールを開きながらアニメーション中の要素を見てもらうと分かりやすいと思います。
.slideToggle()はスライドアップ・スライドダウンの際にstyleを変更しているのがわかると思います。
なので、transitionをallに設定してしまうとtransitionのアニメーションと干渉してカクついてしまうようです。
解決策
transitionを使用するプロパティのみに指定してあげることで解決することができます。
スルスルと正常に動くようになりました！
まとめ
普段からtransitionを設定する際はプロパティを指定するように気をつけていたのですが、今回はallになっていました。
気をつけないと…。
今回はこの辺で。またね。