README
velocity-vue
Vue components to wrap Velocity animations 使用vue组件对velocity.js动画进行了封装
Introduction 介绍
Vue component for interacting with the Velocity DOM animation library. 这是一个vue组件,用该组件可以配合Velocity动画库实现DOM交互。
Running the demo 运行demo
$ git clone https://github.com/zhangguanpeng/vue-animation-velocity.js.git
$ cd vue-animation-velocity
$ npm install
$ npm run dev
Installation 安装
npm install --save velocity-vue
Usage 使用
#main.js
import velocityPlugin from 'velocity-vue'
Vue.use(velocityPlugin)
#template
<VelocityComponent :visible="titleShow" :animationType="titleAnimType" :animation="titleAnimation" @complete="titleComplete">
<h1>{{ msg }}</h1>
</VelocityComponent>
#data
data() {
return {
msg: 'hello vue animation!',
titleShow: false,
titleAnimType: '',
titleAnimation: {
delay: 0,
duration: 1000
}
}
}
#mounted
mounted() {
this.titleAnimType = 'transition.slideUpIn'
}
#methods
titleComplete() {
console.log('动画1已经执行完成后回调');
this.xxx = '';
}
API
VelocityComponent props 属性|说明|类型|默认值 ---|---|---|--- visible|组件展示状态|Boolean|false animationType|动画类型,可以直接使用velocity.js UI pack中的类型,如果值为'custom',则执行自定义动画与animationStyle配合使用|String|空 animationStyle|animationType值为'custom'时生效|Object|null animation|可以对动画延迟(delay),持续时长(duration)等进行配置|Object|null
VelocityComponent events 属性|说明|返回值 ---|---|--- complete|动画执行完成时回调函数|无