velocity-vue

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

VelocityComponent events