displayにtransitionを適用させて表示速度を変えたいのに、変わらなくて困ったことはないでしょうか？
今回はdisplayを表示速度変えることができない理由と解決方法をご紹介します。
やりたいこと
要素をふわっと表示させ、ふわっと消えるようにする。
Contents
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両方を使用する
以上です。
参考にしてみてください。
