vue css过渡及过渡钩子函数介绍

       过渡系统是 Vue.js 为 DOM 动画效果提供的一个特性,它能在从DOM中插入移除时触发你的CSS过渡和动画 ,也就是说在DOM 发生变化时为其加特定的 class类名,Vue.js的过渡系统也支持javascript的过渡 ，通过暴露过渡系统的钩子函数，我们可以在DOM变化的特定时机对其进行属性的操作，产生动画效果。

CSS过渡的用法

<div v-if="show" transition="my-startup"></div> 
var vm = new Vue({
 el : '#app',
 data: {
  show : false  }
});

        首先在模 中用transition绑定一个DOM ,并且使用v-if指令使元素先处于未被编译状态。然后在手动调用vm.show = true,就可以看到DOM元素最后输出为：

<div class="my-startup-transition"></div>

CSS过渡钩子函数

        Vue.js 提供了在插入DOM元素时类名变化的钩子函数,可以通过Vue.transition('name',{})的方式来执行具体的函数操作。

Vue.transition('my-startup', {
  beforeEnter: function (el) {
   console.log('beforeEnter', el.className);  
  },
  enter: function (el) {
   console.log('enter', el.className);
  },
  afterEnter: function (el) {
   console.log('afterEnter', el.className); 
  },
  enterCancelled: function (el) {
   console.log('enterCancelled', el.className);
  },        
  beforeLeave: function (el) {
   console.log('beforeLeave', el.className);  
  },
  leave: function (el) {
   console.log('leave', el.className);
  },
  afterLeave: function (el) {
   console.log('afterLeave', el.className);  
  },
  leaveCancelled: function (el) {
   console.log('leaveCancelled', el.className); 
  }
})

这样，我们就可以通过设置vm.show = true,很清楚的看到钩子函数执行的顺序以及元素类名的变化。