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

川长思鸟来 2021-07-25 21:40 631阅读 0赞

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

*  一. Vue 中使用 js 动画
 *  二. Vue 中 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][http_shouce.jb51.net_velocity_feature.html]
2.  项目的 `index.js` 文件中引入 velocity.js  
    [http://shouce.jb51.net/velocity/index.html][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>

[http_shouce.jb51.net_velocity_feature.html]: http://shouce.jb51.net/velocity/feature.html
[http_shouce.jb51.net_velocity_index.html]: http://shouce.jb51.net/velocity/index.html