查看手机演示

动画组件使用（支持 web 三端）

提示

该组件基于animate.css动画插件使用。组件会作为一个view标签，可对该组件进行自定义样式

平台兼容

H5	微信小程序	APP(ios/Android)
√	√	√

使用

1、app.vue 单独引入

<style lang="scss">
  @import 'kanmi-ui/libs/css/animate.scss'
</style>

<template>
  <view>

    <k-animate name="animate__bounceInDown" :delay='1' :time="2" :count="3" :repeat="true">
      <view>元素</view>
    </k-animate>

  </view>
</template>

API

属性：

参数	类型	作用	默认值	必传
name	string	动画名	animate__bounceInDown
delay	number(秒)	动画X秒后开始执行	0
time	number(秒)	动画单次执行过程时长	1
count	number	动画执行的次数	1
infinite	Boolean	无限次数执行动画（开启后，count参数无效）	false
repeat	Boolean	是否开启来回动画,来回算动画执行了2次	false

动画名大全

animate文档：(https://animate.style/)