v-animate-m

基于animate.css 4. X封装的vue动画指令

Usage no npm install needed!

<script type="module">
  import vAnimateM from 'https://cdn.skypack.dev/v-animate-m';
</script>

README

v-animate-m

基于animate.css 4. X封装的vue动画指令

具体动画类名参考 https://animate.style/

npm npm

功能点

  1. 滚动条的滚动位置进行按需加载。

NPM

https://www.npmjs.com/package/v-animate-m

码云

https://gitee.com/null_639_5368/v-animate-m

示例

http://null_639_5368.gitee.io/v-animate-m

安装和更新

npm i v-animate-m

使用方式

// 1. 全局注册指令

import Vue from "vue";
import "animate.css"; // 4.x的版本
import animateM from 'v-animate-m'

Vue.use(animateM)

// 2. vue组件中使用

<div v-animate-m="'fadeIn'"></div> // 字符串形式

<div v-animate-m="{name:'fadeIn'}"></div> // 对象形式

<div v-animate-m="{name:'fadeIn',delay:'1s'}"></div> // 延迟加载(单位s或ms)

<div v-animate-m="{name:'fadeIn',duration:'1.5s'}"></div> // 持续时间(单位s或ms) 

<div class="block block4 bg-orange" v-animate-m.repeat="{name:'fadeInBottomRight',delay:'0.1s'}"
    ></div> // 重复加载