【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を使う。
