Vue.jsのトランジションでJavaScriptフックを使用する際の注意点

トランジション JavaScriptフックとは

トランジション(アニメーション)をJavaScriptで操作するもの。

フックにはenterとleaveがあり、以下のような種類がある。

表にするとこのようになる。

タイミングはbeforeが前、enter,leaveがトランジション中、afterが後、cancelledがキャンセル時となっている。

サンプルを作成したので、こちらを確認したほうが理解が早いだろう。

便利なトランジションのJavaScriptフックだがafter-enterにスタイルを適用すると反映が持続しないという状態が発生するため注意が必要。(仕様)

例えばafter-enterにel.style.color = 'red'を記述しても2回目以降のafter-enterのトランジション中に色が反映されない。

一度after-enterに適用したのだから2回目以降はトランジション中も変更されているだろうという感覚で書くと失敗する。

これを防ぐにはafter-enterのほうではなくenterに記述する。