likes
comments
collection
share

（25）Vue 中的动画特效——④ Vue 中的 JS 动画与 Velocity.js 的结合 | Vue 基础理论实操

作者站长头像
站长
· 阅读数 45
本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

涉及面试题：
提供 transitions 有什么可能的方式？

[编号：vue_25]

打开编辑器，准备一份有一个简单功能的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>前端一万小时-Vue 中的 JS 动画与 Velocity.js 的结合</title>
  <script src="./vue.js"></script>
  <link rel="stylesheet" href="./animate.css">
</head>
<body>
  <div id="root">
    
    <!-- ❗️transition 标签中包裹了一个 div，点击“切换”按钮可显示/隐藏。 -->
    <transition name="fade">
      <div v-if="show">Hello，前端一万小时</div>
    </transition>
    <button @click="handleClick">切换</button>
    
  </div>

  <script>
    var vm = new Vue({
      el: "#root",
      data: {
        show: true
      },
      methods: {
        handleClick: function() {
          this.show = !this.show
        }
      }
    })
  </script>
</body>
</html>

（25）Vue 中的动画特效——④ Vue 中的 JS 动画与 Velocity.js 的结合 | Vue 基础理论实操

1 Vue 中通过 JS 实现动画

在之前使用动画时，我们都是通过 CSS 来实现。

❓有没有办法通过 JS 实现动画效果呢？

答：有，Vue 中提供了很多 JS 动画的钩子，可以用来实现动画效果。

  <div id="root">

    <transition
      name="fade"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
    > <!-- 1️⃣绑定 before-enter 事件，当它被触发时执行 handleBeforeEnter 函数；
      2️⃣绑定 enter 事件，当它被触发时执行 handleEnter 函数；
      
			3️⃣
			3️⃣-①：绑定 after-enter 事件，调用 done 回调函数后被触发，执行 handleAfterEnter 函数；-->

      <div v-if="show">Hello，前端一万小时</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>

  <script>
    var vm = new Vue({
      el: "#root",
      data: {
        show: true
      },
      methods: {
        handleClick: function() {
          this.show = !this.show
        },
        
        handleBeforeEnter: function(el) { /*
        																	1️⃣-①：handleBeforeEnter 接收一个 el 参数，
        																	这里即 div 元素；
                                           */
          el.style.color = "red" // 1️⃣-②：动画执行前，让元素的样式变为红色；
        },
        
        handleEnter: function(el, done) { // 2️⃣-①：handleEnter 接收 el 和 done 两个参数；
          setTimeout(() => {
            el.style.color = "green"
          }, 2000) // 2️⃣-②：动画开始，2 秒后让颜色变为绿色；

          setTimeout(() => {
            done()
          }, 4000) // 2️⃣-③：4 秒后调用 done 回调函数，动画结束；
        },
        
        handleAfterEnter: function(el) {
          el.style.color = "#000" // 3️⃣-②：动画结束后，让元素变为黑色。
        }
      }
    })
  </script>

用 JS 实现的动画效果：

（25）Vue 中的动画特效——④ Vue 中的 JS 动画与 Velocity.js 的结合 | Vue 基础理论实操

上面我们只添加了入场动画效果，出场动画对应的 JS 钩子是：before-leave、leave 和 after-leave，它们的用法 与 before-enter、enter 和 after-enter 完全一致。

  <div id="root">

    <transition
      name="fade"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
      @before-leave="handleBeforeLeave"
      @leave="handleLeave"
      @after-leave="handleAfterLeave"
    > <!-- 1️⃣绑定 before-leave 事件，当它被触发时执行 handleBeforeLeave 函数；
      2️⃣绑定 leave 事件，当它被触发时执行 handleLeave 函数；
      3️⃣绑定 after-leave 事件，调用 done 回调函数后被触发，执行 handleAfterLeave 函数； -->

      <div v-if="show">Hello，前端一万小时</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>

  <script>
    var vm = new Vue({
      el: "#root",
      data: {
        show: true
      },
      methods: {
        handleClick: function() {
          this.show = !this.show
        },

        handleBeforeEnter: function(el) {
          el.style.color = "red"  
        },

        handleEnter: function(el, done) {  
          setTimeout(() => {
            el.style.color = "green"
          }, 2000)  

          setTimeout(() => {
            done()
          }, 4000)  
        },

        handleAfterEnter: function(el) {
          el.style.color = "#000"  
        },

        handleBeforeLeave: function(el) { // 1️⃣-①：handleBeforeLeave 接收一个 el 参数；
          el.style.color = "red" // 1️⃣-②：动画执行前，让元素的样式变为红色；
        },
        
        handleLeave: function(el, done) { // 2️⃣-①：handleLeave 接收 el 和 done 两个参数；
          
          setTimeout(() => {
            el.style.color = "green"
          }, 2000) // 2️⃣-②：动画开始，2 秒后让颜色变为绿色；

          setTimeout(() => {
            done()
          }, 4000) // 2️⃣-③：4 秒后调用 done 回调函数，动画结束；
        },
        
        handleAfterLeave: function(el) { // 3️⃣-①：handleAfterLeave 接收一个 el 参数；
          el.style.color = "#000" // 3️⃣-②：动画结束后，让元素变为黑色。
        }
      }
    })
  </script>

[![vue25-03.mp4 (672.53KB)

（25）Vue 中的动画特效——④ Vue 中的 JS 动画与 Velocity.js 的结合 | Vue 基础理论实操

2 使用 Velocity.js 实现动画

Velocity.js 是 JS 常用的一个动画库，使用它实现动画非常方便。

下面使用 Velocity.js 给元素添加入场动画效果：

1️⃣在项目中新建名为 velocity.js 的文件，打开 Velocity.js 官网，点击 Download Velocity 下载至本地：（25）Vue 中的动画特效——④ Vue 中的 JS 动画与 Velocity.js 的结合 | Vue 基础理论实操

项目目录结构： （25）Vue 中的动画特效——④ Vue 中的 JS 动画与 Velocity.js 的结合 | Vue 基础理论实操

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>前端一万小时-Vue 中的 JS 动画与 Velocity.js 的结合</title>
  <script src="./vue.js"></script>

  <script src="./velocity.js"></script> <!-- 2️⃣通过 script 标签，从当前目录下
																				引入 Velocity.js；-->

</head>
<body>
  <div id="root">
    <transition
      name="fade"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
    >
      <div v-if="show">Hello，前端一万小时</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>

  <script>
    var vm = new Vue({
      el: "#root",
      data: {
        show: true
      },
      methods: {
        handleClick: function() {
          this.show = !this.show
        },

        handleBeforeEnter: function(el) {
          el.style.opacity = 0; // 3️⃣动画执行前，让元素 opacity 为 0；
        },

        handleEnter: function(el, done) {
          Velocity(el, {opacity: 1}, {duration: 1000, complete: done})  
          /*
          4️⃣：Velocity 的 V 要大写，并传入 3 个参数：
          4️⃣-①：第一个参数为 el，是传入的元素；
          4️⃣-②：第二个参数为 {opacity: 1}，让元素 opacity 变为 1；
          
          4️⃣-③：第三个参数为 {duration: 1000, complete: done}，
          让元素 opacity 变为 1 的时间持续 1 秒，动画完成之后，
          complete 属性对应的内容 done 回调函数会被自动执行。
           */
        },

        handleAfterEnter: function(el) {
          // 5️⃣done 回调函数被调用后执行 handleAfterEnter，输出字符串“动画结束”。
          console.log("动画结束") 
        }
      }
    })
  </script>
</body>
</html>

保存，刷新网页查看：当元素显示时有慢慢过渡的动画效果，1 秒后即动画结束时输出“动画结束”。

（25）Vue 中的动画特效——④ Vue 中的 JS 动画与 Velocity.js 的结合 | Vue 基础理论实操

祝好，qdywxs ♥ you！

转载自:https://juejin.cn/post/7226541360044081207
评论
请登录