タイトル通り
display:noneで非表示にしていたものを
display:blockで表示させるのに、そのままではなく
ふわっとフェードインさせようと思いましたが
display:noneにはtransitionプロパティが使えないのですね
知らなかった…
この場合
opacity:0→opacity:1 だと
transition が使えるのですが
opacityは要素が透明なだけでそこにある
つまり空間は存在します
今回、それだと具合が悪く
やっぱり完全に非表示にしたかったので…
調べたところkeyframeを使うのが良いんだそうです
CSS
例:boxにカーソルを重ねたときに子要素のulが出るようにしたい
/*10px上方からふわっと下に降りてくる*/
@keyframes fuwaMenu {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0px);
}
}
.box ul{
display: none;
}
.box:hover ul{
display: block;
animation: fuwaMenu 0.3s linear 0s;
}
これでうまくいきました!
参考:あれこれ調べましたがこちらのページを特に参考にさせてもらいました(^o^) ありがとうございました!
![](https://bashalog.c-brains.jp/images/cat_coding.png)
displayにtransitionが効かなかった | バシャログ。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9ZGlzcGxheSUzQW5vbmUlM0IlMjAlRTMlODElQTAlRTMlODElQTglRTMlODAlODF0cmFuc2l0aW9uJUUzJTgxJThDJUU1JThBJUI5JUUzJTgxJThCJUUzJTgxJUFBJUUzJTgxJTg0JUU2JTk5JTgyJUUzJTgxJUFFJUU4JUE3JUEzJUU2JUIxJUJBJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz00YWM4YmQxYzEzMzEwZTE2ZjgzOGU3Y2JiYzk3MTBjNw&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzYWJhX3VuaV90b3JvXyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDQwNTBhMzQ1ZTVmODlhMjY5MzE4MmRlMGMyYTk0YTg&blend-x=142&blend-y=486&blend-mode=normal&s=be96f2b89baaceb1cdcf0349cd3f8bb6)
display:none; だと、transitionが効かない時の解決 - Qiita
コメント