聊一聊Vue.js过渡效果

通过 Vue.js 的过渡系统，你可以轻松的为 DOM 节点被插入/移除的过程添加过渡动画效果。Vue 将会在适当的时机添加/移除 CSS 类名来触发 CSS3 过渡/动画效果，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。

以 v-transition=”my-transition” 这个指令为例，当带有这个指令的 DOM 节点被插入或移除时，Vue 将会：

用 my-transition 这个 ID 去查找是否有注册过的 JavaScript 钩子对象。这个对象可以是由 Vue.transition(id, hooks) 全局注册，或是通过 transitions 选项定义在当前的组件内部。如果找到此对象，则会在过渡动画不同的阶段调用相应的钩子。

自动探测目标元素是否应用了 CSS 过渡效果或者动画效果，并在适当的时机添加/移除 CSS 类名。

如果没有提供 JavaScript 钩子函数，也没有检测到相应的 CSS 过渡/动画效果，DOM 的插入/移除会在下一帧立即执行。
所有的 Vue.js 过渡效果只有在该 DOM 操作是通过 Vue.js 触发时才会生效。触发的方式可以是通过内置指令，比如 v-if，或是通过 Vue 实例的方法，比如 vm.$appendTo()。

CSS 过渡效果
一个典型的 CSS 过渡效果定义如下：

<div v-if=”show” v-transition=”expand”>hello</div>

你还需要定义 .expand-transition， .expand-enter 和.expand-leave 三个 CSS 类：

.expand-transition {
 transition: all .3s ease;
 height: 30px;
 padding: 10px;
 background-color: #eee;
 overflow: hidden;
}
.expand-enter, .expand-leave {
 height: 0;
 padding: 0 10px;
 opacity: 0;
}

同时，你也可以提供 JavaScript 钩子：

Vue.transition('expand', {
 beforeEnter: function (el) {
  el.textContent = 'beforeEnter'
 },
 enter: function (el) {
  el.textContent = 'enter'
 },
 afterEnter: function (el) {
  el.textContent = 'afterEnter'
 },
 enterCancelled: function (el) {
  // handle cancellation
 },
`
 beforeLeave: function (el) {
  el.textContent = 'beforeLeave'
 },
 leave: function (el) {
  el.textContent = 'leave'
 },
 afterLeave: function (el) {
  el.textContent = 'afterLeave'
 },
 leaveCancelled: function (el) {
  // handle cancellation
 }
})

结果

这里使用的 CSS 类名由 v-transition 指令的值所决定。以 v-transition=”fade” 为例，CSS 类 .fade-transition 将会一直存在，而 .fade-enter 和 .fade-leave 将会在合适的时机自动被添加或移除。当 v-transition 指令没有提供值的时候，所使用的 CSS 类名将会是默认的 .v-transition， .v-enter 和 .v-leave。