npm install v-animation -S
VAnimation 是一款便捷易使用的vue的动画组件,它集成了强大的预设css3动画库amiante.css。
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>
具体使用方法看详细实例
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 动画名称,可用数组方式设置多个 | Array/String | - |
duration | 执行时长 | Number | - |
delay | 延迟时长 | Number | - |
count | 执行次数,如果设置了infinite="true",此属性无效 | Number | 1 |
infinite | 是否无限循环 | Boolean | false |
<template>
<v-animation name="bounce">
v-animation
</v-animation>
</template>
<template>
<v-animation :name="animationName">
v-animation
</v-animation>
</template>
<script>
export default {
data() {
return {
animationName: ['bounce', 'backInUp']
}
}
}
</script>
<template>
<v-animation :name="animationName">
v-animation
</v-animation>
</template>
<script>
export default {
data() {
return {
animationName: [{
name: 'bounce',
duration: 3,
infinite: true
}]
}
}
}
</script>
https://github.com/maikro-v/v-animation/issues
Copyright (c) 2020-present, Maikro