「display:none;」で非表示になっている要素をクリックイベントなどで「display:block;」と表示に切り替える場合、CSSのtransitionでアニメーションにしようと思っても効きません。
こういう時はCSSのanimationメソッドを使うといいです。
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.content {
display: none;
}
.content.show {
display: block;
animation: show 1s linear 0s;
}
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.content {
display: none;
}
.content.show {
display: block;
animation: show 1s linear 0s;
}
こうすることで、contentクラスの要素に何かしらのイベントでshowクラスがついた際、opacityが0から1になるアニメーションが実行されます。
Leave a Comment