vue 简单使用GSAP3动画

安装 GSAP3

npm install gsap

使用，这个是让图片翻转移动位置，并且在动画结束的时候返转动画回去

<template>
  <div class="home">
    <img alt="Vue logo" class="grey" src="../assets/logo.png">
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import {gsap} from 'gsap'
export default {
  name: 'Home',
  mounted(){
    gsap.to(".grey",{
      duration: 3, // 动画时间
      x: 300, // x 轴
      y: 300, // y 轴
      rotation: 180, //旋转动画
      // 结束事件返转动画
      onComplete: function(){
        this.reversed(true);
      }
    })
  }
}
</script>