Vue.jsのtransitionで`.v-enter`を設定しているのにアニメーションが動かない場合の対応法MEMO📝

Vue.js v3のtransitionで.v-enterを設定し表示時にアニメーションを定義したかったけど、動かず軽くハマったので対応方法をメモ📝

事象

transitionでアニメーションを動かそうと思い以下のコンポーネントのような実装をしたが、開始アニメーションが動かなかった。

<script setup>
const show = ref(false);
</script> 
<template>
  <button @click="show = !show">toggle!</button>
  <Transition><p v-show="show">show!</p></Transition>
</template>
<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter,
.v-leave-to {
  opacity: 0;
}
</style>

原因

Vue.js v3でtransitionで設定されるclassに破壊的変更があり、.v-enterではなく.v-enter-fromに変わった。

The v-enter transition class has been renamed to v-enter-from and the v-leave transition class has been renamed to v-leave-from.

Transition Class Change | Vue 3 Migration Guide

対応

.v-enter-fromで適用するようにしたら解決！

- .v-enter,
+ .v-enter-from,
.v-leave-to {
  opacity: 0;
}

おわりに

transitionだとテストとかで気付けなさそうなのでVue.jsのアップデートとか注意ですね 😵