display:none→display:blockでふわっと出現させたい

タイトル通り
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^) ありがとうございました!

displayにtransitionが効かなかった | バシャログ。
こんちにちわ。kyamashitaです。だいぶ涼しくなり過ごしやすくなりましたね。 今回は、CSSについて知れたことを紹介します。
display:none; だと、transitionが効かない時の解決 - Qiita
問題 ツールチップを作る際、hover時に ふわっと表示されるようにしたいが、 今回都合上displayプロパティを使用することになった。 .tooltip { display:none;/*いつもはopacity:0;と書...

コメント