<css>display要素にtransitionが効かない...

こんにちは、

今日は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を勉強している方の

お役に立てれば幸いです。

何かご質問やご指摘があれば

是非コメントください！

お待ちしています！

リンク