CSS Transitionを使うことで、JavaScriptなしでアニメーションを行えるようになりますが、凝ったことをしようとするとハマることがあります。
なお、典型的なパターンとして、「1つのクラスを付け外しする」ことでアニメーションさせるようなものを前提とします。
ふつうにクラスを切り替えた場合
ある意味当たり前なのですが、Transitionが絡まない状態でクラスを切り替えれば、すべての値が新しいクラスで適用されるものに切り替わります。
CSS Transitionの場合
transition:を指定すると、指定したプロパティは即座に変化せず、transitionの指定に従って変化します。ここで注意しないといけないのは、transitionプロパティ自体は、クラスの切り替えと同時に変化してしまう、ということです。つまり、変更後のクラスで適用されるtransitionの指定に従って、プロパティが変化していく、ということになります。
非対称なアニメーション
とはいえ、ふつうは変わらないクラスにまとめてtransitionをかけてしまうので、どちらの状態でもかかるtransitionは同じとなるため、意識する必要はありません。
ただし、クラスを付けた時と外したときで違うtransitionをかけたい場合には、この差が意味を持ってきます。
div.hoge{
transition: (a)
}
div.hoge.expanded{
transition: (b)
}
div.hogeに.expandedを追加した場合、直感的には(a)のほうのtransitionが適用されるように思うかもしれませんが、実際には.expansionをセットした段階で(b)が適用されるので、(b)の設定でtransitionします。逆に.expandedを外したときには(a)が適用されます。
あと、詳細度の加減で(a)に指定すれば(b)にも継承されますので、(b)の側をtransitionなしにしたい場合、(b)でtransition: noneのように指定して止めておく必要があります。