Vue中如何使用 velocity动画库

第一步：npm install velocity-animate@beta --save-dev 

安装velocity动画库

 

第二步：在main.js引入

// 动画库
import Velocity from 'velocity-animate'
Vue.prototype.Velocity = Velocity
第三步应用：

<template>
<transition v-on:after-enter="afterEnter"
                        v-on:enter="enter">
                <div class="slide-move__line" v-if="show"></div>
            </transition>
</template>

methods:{

afterEnter:function(el){
     console.log(el);
},
enter:function(el,done){
     console.log("显示");
     console.log(el);
     this.Velocity(el, { opacity: 1, left: '100px' }, { duration: 300 })
     this.Velocity(el, { left: '90px' }, { complete: done })
}

}