VUE3之Animation（二）

gsap库

安装：

npm install gsap -save

导入：

import gsap from "gsap";

transition的生命周期回调：

<template>
  <div class="app">
      <div>
        <button @click="isShow=!isShow">显示/隐藏</button>
      </div>
      <transition @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @before-leave="beforeLeave"
        @leave="leave"
        @after-leave="afterLeave">
        <h2 class="title" v-if="isShow">hello world</h2>
      </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShow: true
      }
    },
    methods: {
      beforeEnter() {
        console.log("beforeEnter");
      },
      enter() {
        console.log("enter");
      },
      afterEnter() {
        console.log("afterEnter");
      },
      beforeLeave() {
        console.log("beforeLeave");
      },
      leave() {
        console.log("leave");
      },
      afterLeave() {
        console.log("afterLeave");
      },
    },
  }
</script>

这些生命周期钩子对应了css中的enter-to-class等类。

使用gsap，就是在这些回调的方法中使用gsap的方法。其中from是从一个自定义的状态到结束状态，to方法是从初始状态到一个自定义的状态：

<template>
  <div class="app">
      <div>
        <button @click="isShow=!isShow">显示/隐藏</button>
      </div>
      <transition  @enter="enter"
        @leave="leave"
        :css="false">
        <h2 class="title" v-if="isShow">hello world</h2>
      </transition>
  </div>
</template>

<script>
import gsap from "gsap";
  export default {
    data() {
      return {
        isShow: true,
        distance: 200
      }
    },
    methods: {
      enter(el, done) {
        console.log("enter");
        gsap.from(el,{
          scale:0,
          x:this.distance,
          // 默认是0.5s
          duration:1,
          // 如果不写时，默认在动画开始时同步回调done
          onComplete: done
        })
      },
      leave(el,done) {
        console.log("leave");
        gsap.to(el,{
          scale:0,
          x:200,
          duration:1,
          onComplete:done
        })
      },
    },
  }
</script>

其中回调方法中第一个参数el是指回调产生的元素，同时也需要传入给gsap，第二个参数是动画完成时的回调，一般需要在gasp的onComplete属性中写出。

transition的:css属性设置为false，可以跳过css检测，提高性能。

使用gsap的一个特点是通过JavaScript实现的，比较灵活。