vue 给动态的component增加过度动画

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

1、v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2、v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3、v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4、v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5、v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6、v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

自定义过渡的类名
我们可以通过以下 attribute 来自定义过渡类名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

纯class过渡deom

<transition name="module-fade" mode="out-in">
  <component ref="activeModule" :is="activeModule"></component>
</transition>

在<transition>中切换的类名来说需要注意：如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。
对应css过度动画

.module-fade-enter-active, .module-fade-leave-active {
  transition: all 1s;
}

.module-fade-enter, .module-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

JavaScript 钩子

<transition name="module-fade" mode="out-in"
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            @enter-cancelled="enterCancelled"

            @before-leave="beforeLeave"
            @leave="leave"
            @after-leave="afterLeave"
            @leave-cancelled="leaveCancelled"
>
  <component ref="activeModule" :is="activeModule"></component>
</transition>

对应钩子的方法：

// --------
// 进入中
// --------

beforeEnter (el) {
  console.log('1 beforeEnter')
},
// 回调函数 done 是可选的
enter (el, done) {
  console.log('2 enter')
  done()
},
afterEnter (el) {
  console.log('3 afterEnter')
},
enterCancelled: function (el) {
  // ...
},
// --------
// 离开时
// --------

beforeLeave (el) {
  this.$refs['activeModule'].handleSave();
  console.log('4 beforeLeave')
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave (el, done) {
  console.log('5 leave')
  done()
},
afterLeave (el) {
  console.log('6 afterLeave')
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
  // ...
}

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

enter (el) {
      el.style.opacity = 0
      el.style.transform = 'translateY(30px)'
},

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。