平台兼容性

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

文件结构

1. animate.js 插件文件
2. DEMO.vue DEMO文件

使用

<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方法