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

例えば、初期状態で

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;
}

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