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

``bash
$ git clone https://github.com/zhangguanpeng/vue-animation-velocity.js.git
$ cd vue-animation-velocity
$ npm install
$ npm run dev
`

Installation 安装

` bash
npm install --save velocity-vue
`

Usage 使用


`bash
#main.js
import velocityPlugin from 'velocity-vue'
Vue.use(velocityPlugin)

#template

{{ msg }}

#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|动画执行完成时回调函数|无