JavaScript过渡

        Vue.js 也可以和一些JavaScript配合使用,只需要调用JavaScript钩子函数，而不需要定义CSS样式。transition接受选项 css：false,将直接跳过CSS检测，避免CSS规则干扰过渡，需要在enter和leave钩子函数中调用done函数，明确过渡结束时间。此处将引入Velocity.js来配合使用JavaScript过渡。

Velocity.js

        Velocity.js是一款高效的动画引擎 ,可以单独使用也可以配合jQuery使用。它拥有和jQuery的animate一样的api接口，但比jQuery在动画处理方面更强大、更流畅，以及模拟了一些现实世界的运动，例如弹性动画等。

        Velocity.js 可以做当jQuery的插件使用，例如：

$element.velocity({ left: "100px"}, 500, "swing", function(){
  console. log("done")
});
$element.velocity({ left: "100px"}, {
  duration: 500, 
  easing: "swing",
  complete : function(){console.log("done");} 
});

也可以单独使用, 

var el = document.getElementById(id);
Velocity(el, { left : '100px' }, 500, 'swing', done);

JavaScript过渡使用

     我们可以通过以下方式注册一个自定义的JavaScript过渡。

    

<style>  
 .my-velocity-transition {
    position: absolute; 
    top:0px;  
    width: 100px; 
    height: 100px;   
    background: black;
 }
</style>
<div v-if="velocity" transition="my-velocity"></div> 
Vue.transition('my-velocity', {
  css : false,
  enter: function (el, done) {
    Velocity(el, { left : '100px' }, 500, 'swing', done);  
  },
  enterCancelled: function (el) {
    Velocity(el, 'stop');
  },
  leave: function (el, done) {
    Velocity(el, { left : '0px' }, 500, 'swing', done);  
  },
  leaveCancelled: function (el) {
    Velocity(el, 'stop');
  }
})

       运行以上代码,在设置vue.velocity =  true后，过渡系统会调用enter钩子函数，通过velocity对DOM展现动画效果，强制调用done函数，结束过渡效果。