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

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