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 }) }

}