0.1.7 • Published 3 years ago
v-animation-yanxing v0.1.7
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>