javascriptでtransitionを使いたいです。

Question

javascriptでクリック時やマウスオーバー時にdisplay:blockを適用しています。その時transitionを適用して滑らかに表示されるようにしたいです。どのようにすればよろしいでしょうか？
解決方法があれば教えていただきたいです。

Comments

[s8_chu]

質問者さんが書いたコードなどを追記すると回答がより得られやすくなると思います。

Answer 1

CSS：hoverを使えば良いと思いますが・・・
https://jsfiddle.net/5mffj5gs/4/

Answer 2

滑らかにdisplay: blockにはならないので…
transitionで有効なのは数値の変化のみです。
opacityの変化や色の変化なら可能です。

それともう一点。CSS設定でtransitionをかけていても、
display:noneからdisplay: blockに変化させた場合、
その変化から少し（100msほど）待ってからopacityなりを変化させないと、
徐々に変化してくれません（表示されてからtransitionが有効になるまで僅かに間が空く）

setTineoutでずらすのが手軽です。
その辺りも気をつけて実装してみてください。

Comments

[usawb]

なるほどです！displayは滑らかに表示できないんですね、知りませんでした！jQueryで実装することにします、ありがとうございました