三十三、Vue中JS动画与 Velocity.js 的结合

一、JS动画

  JS动画的核心就是在<transition>标签中，利用@before-enter、@enter、@after-enter 和 @before-leave、@leave、@after-leave 实现入场、离场动画！

<template>
  <div id="slot">
    <!-- 入场动画：@before-enter、@enter、@after-enter
    离场动画：@before-leave、@leave、@after-leave -->
    <transition 
    @before-enter="handleBeforeEnter"
    @enter="handleEnter"
    @after-enter="handleAfterEnter">
      <div v-if="show">
        <h1>你好！</h1>
      </div>
    </transition>
    <button @click="showText">显示/隐藏</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    showText() {
      this.show = !this.show;
    },
    // 参数 el 是动画 <transition> 包裹的 DOM 节点
    handleBeforeEnter(el) {
      el.style.color = 'red';
    },
    // 参数一：el DOM节点  参数二：done 回调函数
    handleEnter(el, done) {
      // setTimeout() 定时器，下例：2秒后执行
      setTimeout(() => {
        el.style.color = 'green';
      }, 2000);
      setTimeout(() => {
        // 告诉 view 我这个动画已经执行完毕，然后才会继续执行 handleAfterEnter
        done();
      }, 4000);
    },
    // 参数一：el DOM节点
    handleAfterEnter(el) {
      el.style.color = 'black';
    }
  }
};
</script>

二、JS动画与 Velocity.js 的结合

1、安装

npm install velocity-animate@beta --save

2.调用页面引入

<script>
import Velocity from 'velocity-animate'
....
</script>

3.使用

<template>
  <div id="slot">
    <!-- 入场动画：@before-enter、@enter、@after-enter
    离场动画：@before-leave、@leave、@after-leave -->
    <transition 
    @before-enter="handleBeforeEnter"
    @enter="handleEnter"
    @after-enter="handleAfterEnter">
      <div v-if="show">
        <h1>你好！</h1>
      </div>
    </transition>
    <button @click="showText">显示/隐藏</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    showText() {
      this.show = !this.show;
    },
    // 参数 el 是动画 <transition> 包裹的 DOM 节点
    handleBeforeEnter(el) {
      el.style.opacity = 0;
    },
    // 参数一：el DOM节点  参数二：done 回调函数
    handleEnter(el, done) {
      Velocity(
        el, 
      {opacity: 1}, 
      {
        duration: 1000, 
        // 当动画执行完毕之后，complete 对应的 done 函数会自动执行，然后才会执行 handleAfterEnter
        complete: done
        })
    },
    // 参数一：el DOM节点
    handleAfterEnter(el) {
      alert("动画执行结束");
    }
  }
};
</script>