0.2.3 • Published 5 years ago
v-animation v0.2.3
v-animation

安装
  npm install v-animation -SVAnimation是什么
VAnimation 是一款便捷易使用的vue的动画组件,它集成了强大的预设css3动画库amiante.css。
效果预览
预览效果
注册组件
1. 全局注册
main.js
import Vue from 'Vue' import VAnimation from 'v-animation'
Vue.use(VAnimation)
> app.vue
```js
  <template>
    <v-animation name="bounce">
      v-animation
    </v-animation>
  </template>
  <script>
    export default {}
  </script>属性 Attributes
具体使用方法看详细实例
| 属性 | 说明 | 类型 | 默认值 | 
|---|---|---|---|
| name | 动画名称,可用数组方式设置多个 | Array/String | - | 
| duration | 执行时长 | Number | - | 
| delay | 延迟时长 | Number | - | 
| count | 执行次数,如果设置了infinite="true",此属性无效 | Number | 1 | 
| infinite | 是否无限循环 | Boolean | false | 
示例
1. 单个动画
<template>
  <v-animation name="bounce">
    v-animation
  </v-animation>
</template>2. 多个动画
<template>
  <v-animation :name="animationName">
    v-animation
  </v-animation>
</template>
<script>
export default {
  data() {
    return {
      animationName: ['bounce', 'backInUp']
    } 
  }
}
</script>3. 多个动画定义其它属性,优先级高于属性方式
<template>
  <v-animation :name="animationName">
    v-animation
  </v-animation>
</template>
<script>
export default {
  data() {
    return {
      animationName: [{
        name: 'bounce',
        duration: 3,
        infinite: true
      }]
    } 
  }
}
</script>Issues
https://github.com/maikro-v/v-animation/issues
License
Copyright (c) 2020-present, Maikro