# uni-app的animate的插件

**Repository Path**: kuboy/uniapps_animate_plugin

## Basic Information

- **Project Name**: uni-app的animate的插件
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-02-09
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

使用uni-app简单封装Animation动画，简单方便。
不依赖其他组件，可单独使用。
内附DEMO文档。


### 文件结构
1. animate.js 插件文件
2. DEMO.vue  DEMO文件

#### ![预览图](https://note.youdao.com/yws/api/personal/file/77A3D2AE26F541FC868F843BD2405E74?method=download&shareKey=67d81c510ae4b31f91e58f402b6f211a)

### 使用
```
<template>
	<view class='move-div'>
		<button type="primary" @click='move'>点击运动</button>
		
		<div id='box'>
			<div id='move' :animation='animationData'>我是移动框</div>
		</div>
	</view>
</template>

<script>
import {animate} from './animate.js';
export default {
	data() {
		return {
			animationData: {}
		};
	},
	methods: {
		move(){
			var self = this;
			animate({
				el: self,   //必选
				animationName: 'animationData',  //必选
				json: {  //必选
					rotate: 45,
					opacity: 0.5,
					scale: [2,2],
					top: 200
				},
				timingFunction: 'ease',  //可选，默认'ease'
				time: 2000,  //可选，默认400
				callback: function(){  //运动完回调函数，可选
					animate({
						el: self,
						animationName: 'animationData',
						json: {
							rotate: 0,
							opacity: 0.8,
							scale: [1.5,1.5],
							top: 100,
							left: 200
						},
						timingFunction: 'ease',
						time: 3000,
						callback: function(){
							console.log('运动完成');
						}
					})
				}
			});
		},
		
	}
}
</script>
```


### 注
不支持H5端。
如果在H5端使用，

1. 在main.js中引入zepto
```
Vue.prototype.$ = require('zepto.js');
```

2. 在其他页面即可直接使用this.$('选择器').animate方法