【css】display: none から block に切り替わった時にフワッとアニメーションさせる

もともとはdisplay: none; を設定し、javascriptでクラスactiveを追加して、display: block に切り替えると・・・
.transition{
display: none;
transition: all .3s ease;
}
.transition.active{
display: block;
}
Titleをクリックしてみてください。
transitionが効かず、一瞬で現れて、あまりおしゃれじゃありません。
opacityを使う
display: none → blockではなく、 opacity: 0; → opacity: 1;に指定すれば、 transitionでアニメーションさせることができます。
Titleをクリックしてみてください。要素がフワッと現れます。
.opacity{
height: 0;
opacity: 0;
transition: all .5s ease;
}
.opacity.active{
height: 100%;
opacity: 1;
}
display: none → block を使う場合
どうしてもdisplay: none → blockを使いたい場合は、animationを使う方法があります。
クラスactiveが追加されたら、animationが発火するようにします。
.display-none{
display: none;
}
.display-none.active{
display: block;
animation: appear .5s ease;
}
@keyframes appear {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
Titleをクリックしてみてください。
でも、これだとactiveを外した時、 パッと消えてしまうのが気になる。
display: block → none の時も、フワッと消したい!
これを実装するには、javascript
を使うしかなさそうです。
ちょっと力業になりますが、もっといい書き方あったら教えてください。
CSSの方にtransitionの設定をしておいてください。
function active(obj) {
// クラスactiveがなかったら、activeを追加
if (!obj.nextElementSibling.classList.contains("active")) {
obj.nextElementSibling.classList.add("active");
} else { // フワッと消す時の処理
obj.nextElementSibling.style = "opacity:0"; // まずopacityで見えなくする
setTimeout((e) => { // 0.5秒後にクラスactiveを削除
obj.nextElementSibling.classList.remove("active");
obj.nextElementSibling.style = "opacity:1";
}, 500);
}
}
これで、フワッと現れ、フワッと消えてくれます。
nextElementSiblingに関しては以下を参考にしてください。

- display: none → block の時、transition は効かない。
- transitionを使いたい時は、opacityを使う。
- display: none → blockを使いたい時は、animationを使う。
こんな記事も読まれています。
-
【CSS】box-sizing: border-boxとは?指定するメリットは?
CSSのbox-sizing: border-boxについて解説します。指定することによりレイアウトしやすくなります。また、親要素からはみ出すことも防げます。
-
【CSS】box-sizing: border-boxとは?指定するメリットは?
CSSのflexboxで上下左右、中央の配置の方法について説明します。justify-contentで左右の配置を、align-itemsで上下の配置を決めます。flex-start,center,flex-endの使い方。
- リンク
-
【CSS】transformのrotateとtransform-originについて。回転させる基点を変える
CSSのrotateについて解説します。指定によりZ軸、X軸、Y軸で回転させます。またtarnsform-originを指定することにより、回転する基点を移動させることができます。
-
【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる
【CSS】filterの使い方について解説します。画像をぼかしたり、色の変化を適用させるには? brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、saturate、sepiaの設定方法
- リンク
-
【CSS】perspective と transform-style で3D表現。立方体を作ってみよう。
CSSのperspectiveとtransform-styleについて解説します。CSSだけで3Dを表現できます。立方体をつくり、それを応用する方法も紹介します。
-
【CSS】animation パート2 アニメーションの動き(time-function),遅延時間(delay),方向(direction)について
【CSS】animation のアニメーションの動き(time-function),遅延時間(delay),方向(direction)について解説します。。
- リンク
-
【css】grid-templateでtwitter風に画像を表示させる方法
grid-templateを使えば、画像を思い通りに配置できます。twitter風に画像を表現することができます。
-
リンク
-
【CSS】マウスを乗せた(ホバーした)時、サムネイル画像を拡大・縮小する方法
CSSでマウスをホバーした時、サムネイル画像を拡大・縮小する方法。overflow: hiddenやtransform: scale();を使い、拡大、縮小させます。