vue 自定义过度组件用法

HTML：

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="v">
    <p v-if="show">hello</p>
  </transition>
</div>

js：

new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})

过渡的类名：

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

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

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

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

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

5. v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

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

　　对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 <transition name="my-transition"> 可以重置前缀，比如 v-enter 替换为 my-transition-enter。

　　v-enter-active 和 v-leave-active 可以控制 进入/离开 过渡的不同阶段