0.1.7 • Published 3 years ago

v-animation-yanxing v0.1.7

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

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",此属性无效Number1
infinite是否无限循环Booleanfalse

示例

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>