vue3的transition类名变更

过渡类名的改变：

• v-enter → v-enter-from

• v-leave → v-leave-from

Vue2中过度流程图：图中两个起始类名发生变化

变化后的过渡类：

v-enter-from v-enter-active v-enter-to v-leave-from v-leave-active
v-leave-to 自定义过渡类名的属性也相应改变了：

leave-class被重命名为leave-from-class enter-class被重命名为enter-from-class Vue
3.x 自定义过渡类名的属性：

enter-from-class enter-active-class enter-to-class leave-from-class
leave-active-class leave-to-class

<template>
 <div id="demo">
   <button @click="show = !show">Toggle</button>

   <transition name="fade">
     <p v-if="show">hello</p>
   </transition>
 </div>
</template>

<script>
export default {
 data() {
   return {
     show: true,
  };
},
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
 transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {//离开和进入的样式都为0
 opacity: 0;
}
</style>

Vue 2.x 的过渡类

在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter
被移除)，在过渡/动画完成之后移除。 v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave
被删除)，在过渡/动画完成之后移除。