# v-animate-m

**Repository Path**: null_639_5368/v-animate-m

## Basic Information

- **Project Name**: v-animate-m
- **Description**: 基于animate.css 4.X封装的vue动画指令
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2020-07-07
- **Last Updated**: 2023-05-08

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

# v-animate-m

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

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

[![npm](https://img.shields.io/npm/v/v-animate-m.svg)](https://www.npmjs.com/package/v-animate-m)
[![npm](https://img.shields.io/npm/dt/v-animate-m.svg)](https://www.npmjs.com/package/v-animate-m)

### 功能点

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](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> // 重复加载
```