vue 安装引入TweenMax.js之TweenMax动画库

项目开发中意外发现同事引入了一个叫的TweenMax动画库，马上试用了一下功能很强大，觉得挺屌的分享出来。
官方网站：TweenMax 中文官网
官方中文API：点击这里

安装

npm install gsap

局部引入

import { TweenLite } from 'gsap/TweenMax'

简单案例

<template>
    <div id="test" class="test">蚂蚁打死了大象</div>
    <button @click="show()">显示</button>
    <button @click="hide()">隐藏</button>
</template>
// 显示
<script>
    import { TweenLite } from 'gsap/TweenMax'
    export default {
        methods: {
            // 显示
            show () {
                TweenLite.to('#test', 0.2, {
                    opacity: 1,
                    onComplete () {
                    }
                })
            },
            // 隐藏
            hide () {
                TweenLite.to('#test', 0.2, {
                    opacity: 0,
                    onComplete () {
                    }
                })
            }
        }
    }
</script>
<style>
.test{
    height: 200px; width: 200px; background: red; color: white;
}
</style>