もち
jsのプロパティ scrollHeight を使って、JQueryなしで滑らかなスクロールにしてみようと色々やってみたのですが、自力でやるのは無理そうだなと思い調べたら、jsを使わない滑らかなアコーディオンを作る方法を見つけたので備忘録として残しておきます。
ブックマーク登録しても、ブックマークしたサイトが多くなってきてしまったので、どこにあるのか探すのが面倒になってしまったので(笑)
滑らかに動くアコーディオン
See the Pen Untitled by mothihuku (@mothi002) on CodePen.
上のデザインはしょーごさんの販売されている、中級課題のよくある質問部分のアコーディオンです。
もうすでに一度作ったことのあるものですが、コーディングのスピードが遅すぎるため、練習としてもう一度やっていました。
1回目の挑戦の時の備忘録の記事です。
もしよければ見てみてください。
しょーごさんの中級課題についてはこちらをどうぞ！
本題から外れてすみません。
滑らかな動きを実現するために、heightではなくline-heightを使い、あとopacityとpaddingを使っています。
transitionは、height 0px => auto のようなautoを使った変化をする時は機能してくれません。
なので、その代わりにline-height 0 => 1.5 のような指定をすることで、滑らかな動きになるようにしています。
opaticyを指定したのは、閉じている最中にline-heightが０になることで、文字がゴチャついてしまい、一瞬とはいえ、あまり見栄えが良くないなと思ったからです。
効果としては、多少マシになるくらいですが。。。
以上になります。
