README
v-animation
安装
npm install v-animation -S
VAnimation是什么
VAnimation 是一款便捷易使用的vue的动画组件,它集成了强大的预设css3动画库amiante.css。
效果预览
预览效果
注册组件
1. 全局注册
main.js
import Vue from 'Vue'
import VAnimation from 'v-animation'
Vue.use(VAnimation)
app.vue
<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