【CSS】displayにtraisitionは効かない→visiblityとopacityで解決

displayにtransitionを適用させて表示速度を変えたいのに、変わらなくて困ったことはないでしょうか？

今回はdisplayを表示速度変えることができない理由と解決方法をご紹介します。

displayにはtransitionが効かない

例えばハンバーガーメニューで下記のようにしたい場合です。

.nav-menu{
display:none;
transition: 0.3s;
}
 
.active .nav-menu{
display:block;
transition: 0.3s;
}

display:none;　→　display:block;　にすれば確かに表示・非表示は可能ですが、transitionが適応されません。

パッと表示しパッと消えてしまいます。

代替案①opacity

続いて代替案としてopacityを使ってみます。

.nav-menu{
opacity:0;
transition: 0.3s;
}
 
.active .nav-menu{
opacity:1;
transition: 0.3s;
}

結果としては、transitionは効いたのものの弊害がありました。

opacityは完全に消えているわけではない

opacityはあくまで透明にしているだけなので、サイト全体を覆っているような状態です。

そのため、非表示のように見せているだけなのでサイト内のリンクや横scrollができませんでした。

代替案②visibility

続いてvisibilityを使ってみます。

.nav-menu{
visibility: hidden;
transition: 0.3s;
}
 
.active .nav-menu{
visibility: visible;
transition: 0.3s;
}

結果としては、transitionは効いたものの、徐々に消えて徐々に表示といいうものではなく、「transition: 0.3s;経過したら表示し、transition: 0.3s;経過したら消える」というもの「徐々に」ではありませんでした。

解決方法opacityとvisibility両方を使う

解決方法としては、opacityとvisibility両方を使うというものでした。

.nav-menu{
opacity:0;
visibility: hidden;
transition: 0.3s;
}
 
.active .nav-menu{
opacity:1;
visibility: visible;
transition: 0.3s;
}

これにより、要素をふわっと表示させ、ふわっと消えるようにすることが出来ました。

opacityを使っているので、transition がしっかりと効き、visibilityによりopacityのように覆うのではなくしっかりと非表示状態となりました。

この両者は丁度いい具合にお互いを補い合っているようです。

まとめ

要素の表示・非表示を行いたい場合は、以下のような特製があることに注意です。

①block→要素は消える　+　transition が効かない
②opacity→要素が透明になっているだけ　+　transition は効く
③visibility→要素は消える　+　transition が効かない（「徐々に変化」にはならない）

要素をふわっと表示させ、ふわっと消えるようにするための解決方法

→②opacityと③visibility両方を使用する

以上です。

参考にしてみてください。