@voejs/animate

animation of voe.js which using vue.js

Usage no npm install needed!

<script type="module">
  import voejsAnimate from 'https://cdn.skypack.dev/@voejs/animate';
</script>

README

Vue animation component

This is a lightest animation component of Vue.js which using animate.css or velocity.js.

Demo

Example

Install

npm i @voejs/animate --save

Usage

Animation

<animation enter="bounceInLeft" leave="bounceOutLeft" appear>
  <div class="box box1" v-if="condition"><span>Vue.js - voe.js - animate.css</span></div>
</animation>

props:

  • appear - boolean，是否在初始渲染时使用过渡。默认为 false
  • mode - string，控制离开/进入的过渡时间序列。有效的模式有 "out-in"` 和 "in-out"`；默认同时生效。
  • enter - string，进入动画名，基于animate.css动画库。
  • leave - string，离开动画名，基于animate.css动画库。

AnimationGroup

<animation-group tag="div" enter="transition.bounceLeftIn" leave="transition.bounceLeftOut" appear :delay="30">
  <div class="box box2" v-for="(item, index) in list" :key="index" :data-index="index" :data-length="list.length">
    {{item}}
  </flex>
</animation-group>

Props:

  • appear - boolean，是否在初始渲染时使用过渡。默认为 false
  • mode - string，控制离开/进入的过渡时间序列。有效的模式有 "out-in"` 和 "in-out"`；默认同时生效。
  • delay - number，列表中每个单位元素动画进入或者离开的时间间隔，默认0。
  • tag - string，默认为 span。
  • enter - string，进入动画名，基于velocity.js动画库。
  • leave - string，离开动画名，基于velocity.js动画库。

注意：在<slot></slot>中的子元素必须绑定key属性以及 data-index、data-length属性，否则报错。

  • data-index 元素索引
  • data-length 列表元素总个数

License

This is MIT licensed.