例となるコード
うっすらと表示するフェードイン、うっすらと消えるフェードアウト。
HTML&CSSでフェードイン、フェードアウトを実装する際に、下記のようにdisplay:none;とdisplay:block;で制御しようとすると書くとアニメーションが利かず、いきなり消えたり、いきなり表示されてしまう。
<style>
div#sample{
width:200px;
height:200px;
background:red;
}
div#sample2{
width:200px;
height:200px;
background:blue;
display:none;
transition:.2s ease;
}
div#sample:hover div#sample2{
display:block;
}
</style>
<div id="sample">
<div id="sample2">
</div>
</div>原因
アニメーションは数値で連続性のあるプロパティが変化する際に、最初と最後の間の値を保管することでアニメーションとなる。一方displayは離散的なプロパティなので、値同士の間みたいなものがないので、補完しようがない。という理解。
また、displayはレイアウトを変更するプロパティなので、値が変わるとそもそものレイアウトが再計算されてしまうので、アニメーションが適用されないという記事もあった。
解決策
opacityを使用して、透明度を制御することでアニメーションができる。
<style>
div#sample{
width:200px;
height:200px;
background:red;
}
div#sample2{
width:200px;
height:200px;
background:blue;
opacity:0;
transition:.2s ease;
}
div#sample:hover div#sample2{
opacity:1;
}
</style>
<div id="sample">
<div id="sample2">
</div>
</div>
コメント