Vue2 动画

生命周期

1. v-enter：元素进入的开始状态。在元素被插入之前生效，在元素被插入之后移除。
2. v-enter-active：元素进入阶段。常用来设置元素进入的过程时间，延迟和曲线函数。
3. v-enter-to: 元素进入的结束状态。
4. v-leave: 元素离开的开始状态。
5. v-leave-active：元素离开阶段。常用来设置元素离开的过程时间，延迟和曲线函数。
6. v-leave-to: 元素离开的结束阶段

组件

Vue 提供了封装组件

下面这些情形，可以给任何单个元素和组件添加动画

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

过渡顺序（使用 mode）

• out-in：先出后进
• in-out：先进后出

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

---

<transition-gourp name="fade">
    <p v-for="item in 4" :key="item">hello</p>
</transition-gourp>

同时为多个子级元素添加动画时，需要使用 transition-gourp 组件，否则会报错

并且每个 transition-group 组件的子节点必须有独立的 key，动画才能正常工作

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

钩子函数

可以再写标签上，也可以写在 methods 节点中

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>