display: none; のDOMに対してtransitionを使う際の注意

More than 3 years have passed since last update.

例えば、初期状態で

display: none;

opacity: 0;

としてあるDOMを、あるイベントによって

display: block;

にすると同時にopacityを1へとアニメーションしたい場合。

それをcssのtransitionを使って実現しようとすると、

css:

.hoge{

display: none;
opacity: 0;
transition: opacity 1s linear 0s;
}

.hoge.show{
display: block;
opacity: 1;
}

と直感的に書いてしまいがちであるが、これではうまく動かない。

なぜならshowがクラス名として付与された時点で初めて

display: block;

となり、このタイミングでDOMが生成されているため。

従って、display: none; 状態のときの

opacity: 0;

というプロパティはtransitionのスタート値とはならず、 0 -> 1 へのアニメーションは走らない。

上記の仕様を実現するには、cssのanimationを使うと良い。

@keyframes show{

from{
opacity: 0;
}
to{
opacity: 1;
}
}

.hoge{
display: none;
}

.hoge.show{
display: block;
animation: show 1s linear 0s;
}

※ベンダープレフィックスは割愛