こんにちは、
今日はcssのtransitionが効かない場合の話をします。
例えば、
Javascriptを使ってhover時に.activeクラスを追加し、
cssでdisplay: none; からdisplay: block;に変更すれば
hoverした時に出てくるサブメニューなどを作れます。
そこで、もう少し滑らかに出てくるようにしたい！
と思いtransitionを使っても、
あれ、変わらない...。
と言ったような経験はないでしょうか。
諦める必要はありません。
overflow: hidden;を使用すれば、
display: none;と同じ動きをして、尚且つtransitionも有効になります！
例えばこんな感じです。
See the Pen xxqPRNx by shefuyuta (@shefuyuta) on CodePen.
.activeクラスがついた時に追加されるのはmin-heightのみ。
これにより対象クラスのhover時に.submenuの高さが
0から任意の値(上の例では120px)に変わります。
displayやoverflowの更新は必要ありません。
かなりシンプルですね。
あとはちょっとしたことですが、
transitionは.submenu:hoverではなく、.submenuにつける必要がありますのでご注意ください！
こんな感じです。
cssやJavascriptを勉強している方の
お役に立てれば幸いです。
何かご質問やご指摘があれば
是非コメントください！
お待ちしています！