CSS transitionを往復で非対称にかける場合の注意点

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のように指定して止めておく必要があります。