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