Vue.js の enter トランジション/アニメーションが適用されない

概要

Vue.js の v2.6.9 以降、 <transition> タグを直下に持ったコンポーネントを v-if で表示/非表示する場合、 v-if の値が false から true になる際の enter トランジション/アニメーションが効かなくなるようです。

以下、その例と解決方法です。

enter トランジション/アニメーションが効かない例

Toggle と書かれたボタンをクリックする度に、 My Transition Component. という文字列が表示/非表示される UI があるとします。ここでは v-if で評価する isShown のデフォルト値は false とします。

<button v-on:click="isShown = !isShown">Toggle</button>
<my-transition-component v-if="isShown"></my-transition-component>

また、 my-transition-component は次のような html を持つコンポーネントとします。

<transition name="fade">
  <div>My Transition Component.</div>
</transition>

トランジションのためのCSSは以下が定義されているとします。

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

ここで、 Toggle ボタンをクリックし、 isShown の値を false から true に変更すると、 my-transition-component の My Transition Component. という文字列が描画されますが、 enter トランジション/アニメーションが適用されません。

<transition> に appear 属性タグを追加する

上記の enter トランジション/アニメーションが適用されない問題の解決方法としては、トランジションさせたいコンポーネントの <transition> タグに appear 属性タグを追加します。 そうすると、コンポーネントが描画されるタイミングで、 enter トランジションが動作するようになります。

<transition name="fade" appear>
  <div>My Transition Component.</div>
</transition>

参考