Vue - Vue 中使用 js 动画与 velocity.js

一. Vue 中使用 js 动画

入场动画：

1. before-enter：动画进入之前的回调,接收一个参数（el）。
   el 指被 transition 标签包裹的内容
2. enter：动画进入完成时候的回调.接收两个参数（el,done）。
   el 指被 transition 标签包裹的内容;
   done 是一个回调函数，告诉vue，动画执行完了，可以执行下一个钩子函数
3. after-enter：在动画执行完后的处理

<template>
  <div class="wrap">
    <transition
      name="fade"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
    >
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切换显隐</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
    //动画进入之前执行
    handleBeforeEnter(el) {
      console.log("before", el);
      el.style.color = "red";
    },
    //动画进入完成时候执行
    handleEnter(el, done) {
      // 2 秒之后将文字变成蓝色
      setTimeout(() => {
        el.style.color = "blue";
      }, 2000);
      // 4 秒之后执行 done 函数，继续执行下一个钩子
      setTimeout(() => {
        done();
      }, 4000);
    },
    //在动画执行完后，将字体变成黑色
    handleAfterEnter(el) {
      el.style.color = "#000";
    },
  },
};
</script>
<style scoped>
</style>

出场动画：
分别为 before-leave 、leave 、after-leave ，用法和入场动画类似。

二. Vue 中 velocity.js 库的使用

1. velocity.js 官网
   http://shouce.jb51.net/velocity/feature.html
2. 项目的 index.js 文件中引入 velocity.js
   http://shouce.jb51.net/velocity/index.html
   注意：
   若引入 velocity.js 无法使用，可使用以下资源链接：
   <script src="https://cdn.bootcdn.net/ajax/libs/velocity/2.0.6/velocity.min.js"></script>
3. 使用 velocity.js 库

   <template>
     <div class="wrap">
       <transition
         name="fade"
         @before-enter="handleBeforeEnter"
         @enter="handleEnter"
         @after-enter="handleAfterEnter"
       >
         <div v-show="show">hello world</div>
       </transition>
       <button @click="handleClick">切换显隐</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         show: true,
       };
     },
     methods: {
       handleClick() {
         this.show = !this.show;
       },
       //动画进入之前执行
       handleBeforeEnter(el) {
         el.style.opacity = 0;
       },
       //动画进入完成时候执行
       handleEnter(el, done) {
         //透明度 从 0 到 1 在 1 秒之内执行完成
         Velocity(el, { opacity: 1 }, { duration: 1000, complete: done });
       },
       //在动画执行完后，将字体变成黑色
       handleAfterEnter(el) {
         console.log("动画结束")
       },
     },
   };
   </script>
   <style scoped>
   </style>