animate和gsap的基本使用

安装Animate.css

• yarn安装: yarn add animate.css
• npm安装: npm install animate.css

animate.css的导入

• 在main.js中直接引入: import "animate.css"

animate.css的使用

1.用法一：直接使用animate库中定义的keyframes动画

.beichen-enter-active {
  animation: flip 1s ease;
}
.beichen-leave-active {
  animation: flip 1s ease reverse;
}

2.用法二：直接使用animate库提供给我们的类

<transiton name="beichen"
           enter-active-class="animate__animated animate__lightSpeedInRight"
           leave-active-class="animate__animated animate__lishtSpeedOutRight">
  <h2 v-if="isShow">{{message}}</h2>
</transition>

其中animate__animated类时必须要添加的

gsap库

实现一些动画的库

利用gsap来完成js最基本的动画

• 安装gsap库
  yarn add gsap or npm install gsap

• 导入gsap库
  import gsap from "gsap";

transition组件提供给我们的JavaScript钩子：

• @before-enter=”beforeEnter”
• @enter=”enter”
• @after-enter=”afterEnter”
• @before-leave=”beforeLeave”
• @leave=”leave”
• @after-leave=”afterLeave”

methods: {
      //生命周期的钩子
      beforeEnter(el) {
        console.log("beforEnter");
      },
      enter(el, done) {
        console.log("enter");
      },
      afterEnter(el) {
        console.log("afterEnter");
      },
      beforeLeave(el) {
        console.log("beforLeave");
      },
      leave(el, done) {
        console.log("Leave");
      },
      afterLeave(el) {
        console.log("afterLeave");
      },
    }

当我们使用JavaScript来执行过渡动画时，需要进行 done 回调，否则它们将会被同步调用，过渡会立即完成
enter和leave钩子时有el(target)和done参数的,其余的钩子只有el参数。

css=”false” 属性

添加:css="false"会让VUE跳过css的检测，不仅能提高性能，还能避免css的规则的影响。

gsap库的使用

<transition @enter="enter"
                @leave="leave"
                :css="false">
      <h2 class="title" v-if="isShow">{{message}}</h2>
    </transition>

methods: {
      //生命周期的钩子
      enter(el, done) {
        console.log("enter");
        gsap.from(el, {
          scale: 0,
          /* 等同于transfrom: straslate(200px) */
          //相关的文档在官网中有，可以查得到
          x: this.distance,
          /* 动画执行的时间,默认是的0.5s */
          // duration: 1,
          //在动画过渡完成后回调done，表示执行结束
          onComplete: done
        })
      },
      leave(el, done) {
        console.log("Leave");
        gsap.to(el, {
          scale: 0,
          x: this.distance,
          onComplete: done
        })
      }
    }

gsap实现数字递增的一个小案例

<template>
  <div>
    <input type="number" step="100" v-model="counter">
    <h2>当前计数:{{ShowCounter}}</h2>
    <h2>当前计数:{{ShowNumber.toFixed(0)}}</h2>
  </div>
</template>

<script>
  import gsap from "gsap";

  export default {
    data() {
      return {
        counter: 0,
        ShowNumber: 0
      }
    },
    computed: {
      ShowCounter() {
        return this.ShowNumber.toFixed(0);
      }
    },
    watch: {
      counter(NewValue) {
        gsap.to(this, {
          // duration: 0.5,
          ShowNumber: NewValue
        })
      }
    }
  }
</script>