0.1.7 • Published 4 years ago
v-animation-yanxing
Licence
MIT
Version
0.1.7
Deps
5
Size
1008 kB
Vulns
1
Weekly
0
v-animation-yanxing
安装
npm install v-animation-yanxing -S
VAnimationYanxing是什么
VAnimationYanxing 是一款便捷易使用的vue的动画组件,它集成了预设css3动画库amiante.css。
注册组件
1. 全局注册
main.js
import Vue from 'Vue'
import VAnimationYanxing from 'v-animation-yanxing'
import 'v-animation-yanxing/lib/v-animation-yanxing.css'
Vue.use(VAnimationYanxing)
app.vue
<template>
<v-animation-yanxing name="bounce">
v-animation-yanxing
</v-animation-yanxing>
</template>
<script>
export default {}
</script>
属性 Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 动画名称,可用数组方式设置多个 | Array/String | 参考amiante.css动画库类名 |
| duration | 执行时长 | Number | - |
| delay | 延迟时长 | Number | - |
| count | 执行次数,如果设置了infinite="true",此属性无效 | Number | 1 |
| infinite | 是否无限循环 | Boolean | false |
示例
1. 单个动画
<template>
<v-animation-yanxing name="bounce">
v-animation-yanxing
</v-animation-yanxing>
</template>
2. 多个动画
<template>
<v-animation-yanxing :name="animationName">
v-animation-yanxing
</v-animation-yanxing>
</template>
<script>
export default {
data() {
return {
animationName: ['bounce', 'backInUp']
}
}
}
</script>