（十五）vue之过渡&动画

概述

Vue 在插入、更新或者移除 DOM 时，我们能实现这之间转换的过渡效果。
然后这些过渡效果是在dom操作（插入、删除）正式应用之前执行。
注意：更新就等于重新插入的操作。

实现方式

1.使用vue内置的class类名,我们直接在当前类下写样式。
2.在过渡钩子函数中使用 JavaScript 直接操作 DOM
3.可以配合使用第三方 CSS/JS 动画库,如 Animate.css,JavaScript ,Velocity.js

css过渡实例

1.适用条件

通过如下方式实现对DOM的插入、更新，移除，隐藏等操作时

 1. 条件渲染 (使用 v-if) 
 2. 条件展示 (使用 v-show) 
 3. 动态组件 
 4. 组件根节点

2.采取vue提供的类名实现过渡

• (1)过渡类名

当通过vue实现元素插入、更新、移除、隐藏时，在这些操作正式执行前，vue提供了6 个 class 用于实现过渡的效果，其中每个类名代表了dom在正式插入或者删除【隐藏/显示】前的不同过渡时刻。
（注意：过渡效果是发生在这些操作正式执行前的）

V-enter     ,      v-enter-active       ,    v-enter-to
V-leave     ,      v-leave-active       ,    v-leave-to

时刻如下

1.发起了dom插入操作时------过渡前，过渡中，过渡后--------》插入完成
2.发起了dom删除操作时------过渡前，过渡中，过渡后--------》删除完成
然后我们可以通过这六个类名的切换，在dom正式插入前与正式删除前实现过去效果。（即删除时的过渡、插入时的过渡）

• (2)过渡流程

1.将你要过渡的元素放入vue内置的transition标签中。

提示：可以写多个transition标签，如果没有给名称，在写6个类时，那么v-开头的可以控制所有的过渡，如果给了名称，那么就只能是一对一的控制了

2.通过vue实现对transtion中的元素进行插入或者删除的操作。

提示：transtion标签中的元素应该只有一个最外层标签

3.在对应的六个类名中写css代码，实现在插入或删除完成前过渡效果。

• (3)过渡实例

1)在dom被正式插入之前的三个过渡类名使用

V-enter     ,      v-enter-active       ,    v-enter-to

2)在dom被正式删除之前的三个过渡类名使用

• (4)过渡本质

这六个类名并不会一开始就加在dom元素上。当vue插入或删除元素时,vue会自动嗅探我们是否在这几个类上条件了过渡css代码， 如果加了，就在恰当的时机添加/删除 CSS 类名，来实现过渡效果。如果没加，那DOM 操作 (插入/删除) 在下一帧中立即执行，即马上执行删除或插入操作。【关于这点我们可以打开浏览器调试工具进行验证。】

• (5)各个过渡类名详解
  

v-enter ：定义dom插入时过渡的开始状态。

在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义dom插入时 过渡生效时的状态。

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

v-enter-to: 2.1.8版及以上 定义dom插入时，过渡结束的状态。

在元素被插入之后下一帧生效 ，在过渡/动画完成之后移除。

v-leave: 定义dom删除时过渡的开始状态。

在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义dom删除时过渡生效时的状态。

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

v-leave-to: 2.1.8版及以上 定义dom删除时过渡的结束状态。

在离开过渡被触发之后下一帧生效，在过渡/动画完成之后移除。

注意

对于这些在过渡中切换的类名来说
如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。
如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。

• (6)使用vue提供的类的原因

1.一般而言我们是可以同class的设置控制UI的过渡动画效果的。
2.但是在vue那数据驱动的模式下，通过让v-show或者v-if的条件不成立来让元素消失时，他会瞬间执行。
3.即便v-show隐藏是通过display:none实现，我们也无法让他过渡（这个过程是有vue本身控制的）。
4.我们没法在这个过程去设置过渡或者动画。所以只能是有vue本身提供的相关实现。

CSS 动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 动画完成后的事件
触发时删除。

示例：


JavaScript 钩子

	可以在属性中声明 JavaScript 钩子

• 钩子方法名

  

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

例子

这些钩子函数可以结合 CSS 过渡/动画 使用，也可以单独使用。