Vue过渡&动画

过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
工具：
1.在CSS过渡和动画中自动应用class
2.可以配合使用第三方CSS动画库,如Animate.css
3.在过渡钩子函数中使用JavaScript直接操作DOM
4.可以配合使用第三方JavaScript动画库,如Velocity.js

一、单元素/组件的过渡

 动画触发的场景/给元素和组件添加进入/离开过渡：
  1.条件渲染(使用v-if,创建和销毁)
  2.条件展示(使用v-show,显示和隐藏)
  3.动态组件(组件切换,组件的激活和冻结)
  4.组件的根节点(加载)

二、CSS过渡

 Vue提供了transition封装组件,在上述的几个场景中触发过渡,通过name属性添加指定的前缀class样式

三、过渡类名

在进入/离开的过渡中,会有6个class切换
如果在transition中设置了name,那么下面类名中的v会被替换为name的属性值
1.v-enter
 定义进入过渡的开始状态
 元素被插入前生效,元素被插入的下一帧失效
2.v-enter-active
 定义进入过渡生效时的状态
 元素被插入前生效,在过渡/动画完成后移除
 用来定义进入过渡的过程时间,延迟和曲线函数
3.v-enter-to
 2.1.8版及以上定义进入过渡的结束状态
 元素被插入的下一帧生效,过渡/动画完成后移除
4.v-leave
 定义离开过渡的开始状态
 在离开过渡被触发时立刻生效,下一帧被移除
5v-leave-active
 定义离开过渡生效时的状态
 离开过渡被触发时立刻生效,在过渡/动画完成后移除
 用来定义离开过渡的过程时间,延迟和曲线函数
6.v-leave-to
 2.1.8版及以上定义离开过渡的结束状态
 在离开过渡被处罚之后下一帧生效,在过渡/动画完成后移除

四、CSS动画

 CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter类名在节点插入 DOM 后不会立即删除，而是在animationend事件触发时删除
 使用自定义动画@keyframes时,transition要换为animation

五、同时使用过渡和动画

 Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

 但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用type attribute并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

六、显性的过渡持续时间

默认情况下,vue回等待其在过渡效果的根元素的第一个transitionend或animationend事件
使用transition组件上duration定制一个线性的过渡持续时间(ms):
<transition :duration="1000">···</transition>
也可以定制进入和移出的持续时间
<transition :duration="{enter:500,leave:800}">···</transition>

七、Javascript钩子

使用v-on
谁触发这些事件就会把该元素传入事件中

注意：
 1.当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
 2.推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。