Vue -- 过渡和动画

单组件过渡和动画

• 动画方案：css过渡和动画中自动用class；配合css第三方库如 Animate.css；在钩子里面js操作dom；配合第三方js库如 Velocity.js。
• 单元素的过渡：可以用transition，有几种情况满足：v-if和v-show、根组件、动态组件。

// html

  
    Toggle
  
  
    
hello
  


// css

• 当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
2. 如果过渡组件提供了JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)。

• v-enter和v-leave过渡的开始状态，v-enter-to和v-leave-to是结束过渡时的状态。

  
  
  

  过渡类名
• 也可以在上使用enter-class、enter-active-class enter-to-class、leave-class、leave-active-class、leave-to-class属性作为类名，优先级高于name指向的class，可用于第三方库。
• 动画：

  Toggle show
  
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.
  

js钩子

• 在上增加监听事件：

methods: {
  beforeEnter: function (el) {
    // el.style.opacity = 0
  },
  // 此回调函数是可选项的设置，与 CSS 结合时使用
  enter: function (el, done) { done() },
  afterEnter: function (el) {},
  enterCancelled: function (el) {},

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

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

初始渲染

• 初始渲染也有css和js钩子，把上面的enter和leave换成appear就可以了。

多组件的过渡和动画

• 原生标签可以通过v-if和v-else来指定，但记得加上key，否则会重用。内容一致的时候还可以用key来简写代码。

  
    Save
  
  
    Edit
  


// key写法

  
    {{ isEditing ? 'Save' : 'Edit' }}
  

• 对于多个原生组件，要注意一个组件的离开过渡和另一个组件的进入过渡是同时发生。可加上定位和translate让他们看起来像滑动过渡。或者可以通过mode属性指定先后顺序（out-in和in-out两种）。
• 对于多个自定义组件，只需在外嵌套一层即可。
• 对于列表，则与上面最终只有一个组件不同，需要用包裹。注意，内部的列表必须要用key；且会真实渲染可用tag指定最终渲染标签否则默认span；mode属性不可用；以及有v-move或者move-class，类似v-enter和enter-class用法但可以实现平滑过渡（注意使用该属性进行过渡的元素不能设置为display: inline。
• 过渡也可以复用，只需将或作为根组件即可。
• 动态过渡是通过绑定name属性来实现css的动态切换来达到过渡的动态切换。