13.1.5 使用JavaScript钩子函数实现动画

在Vue.js中，动画与过渡不仅是提升用户体验的关键元素，也是展示开发者对Vue深入理解和应用能力的窗口。Vue通过内置的<transition>和<transition-group>组件提供了声明式的过渡和动画支持，但有时候，基于项目特定的需求或是对性能的更精细控制，使用JavaScript钩子函数来实现动画会是一个更灵活、更强大的选择。本章将深入探讨如何在Vue组件中利用JavaScript钩子函数来创建动画效果。

13.1.5.1 理解Vue的过渡与动画系统

在深入探讨JavaScript钩子函数之前，先简要回顾Vue的过渡与动画基础。Vue的<transition>和<transition-group>组件通过包裹要过渡的元素，并利用CSS类或JavaScript钩子函数来控制这些元素的进入、离开及列表的更新动画。Vue会自动侦测目标元素是否应用了CSS过渡或动画，并在适当的时机添加/移除CSS类。

然而，当CSS不足以满足需求时（比如需要动态计算动画属性或基于复杂逻辑控制动画），就可以利用JavaScript钩子函数来编写更复杂的动画逻辑。

13.1.5.2 JavaScript钩子函数概览

Vue为<transition>和<transition-group>组件提供了一系列JavaScript钩子函数，允许你在动画的各个阶段插入自定义的JavaScript代码。这些钩子包括：

• beforeEnter(el)
• enter(el, done)
• afterEnter(el)
• enterCancelled(el)
• beforeLeave(el)
• leave(el, done)
• afterLeave(el)

• leaveCancelled(el)

• beforeAppear、appear、afterAppear、appearCancelled（仅在初始渲染时触发）

每个钩子函数都接收一个el参数，表示被过渡的DOM元素。对于需要异步完成的动画，enter和leave钩子还提供了一个done回调函数，作为动画完成的信号。

13.1.5.3 使用JavaScript钩子函数实现动画

示例：简单淡入淡出动画

以下是一个使用JavaScript钩子函数实现简单淡入淡出动画的示例。假设我们有一个Vue组件，其模板部分包含一个需要淡入淡出的<div>元素：

<template>
  <div>
    <button @click="show = !show">Toggle Fade</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <div v-if="show" class="fade-box">
        Hello, Vue!
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      // 使用requestAnimationFrame或setTimeout来实现平滑过渡
      const duration = 500;
      let start = null;
      const opacity = el.style.opacity;
      (function fade() {
        if (start === null) start = Date.now();
        const time = Date.now() - start;
        if (time < duration) {
          el.style.opacity = (time / duration) * opacity;
          requestAnimationFrame(fade);
        } else {
          done();
        }
      })();
    },
    leave(el, done) {
      // 类似地，实现淡出效果
      const duration = 500;
      let start = null;
      (function fade() {
        if (start === null) start = Date.now();
        const time = Date.now() - start;
        if (time < duration) {
          el.style.opacity = 1 - (time / duration);
          requestAnimationFrame(fade);
        } else {
          done();
        }
      })();
    }
  }
}
</script>
<style>
.fade-box {
  transition: opacity 0.5s ease; /* 虽然这里定义了CSS过渡，但实际动画由JS控制 */
  opacity: 1;
}
</style>

在这个例子中，我们通过在Vue组件的methods中定义beforeEnter、enter和leave方法，并在<transition>组件上通过@（或v-on:）监听器绑定这些方法来控制动画。enter和leave方法中，我们使用了requestAnimationFrame来创建平滑的动画效果，并通过调用done回调函数来通知Vue动画已完成。

进阶：动态计算动画属性

在更复杂的场景中，你可能需要根据组件的状态或其他条件动态计算动画属性。例如，你可能想要根据元素的位置或大小来动态调整动画的持续时间或缓动函数。

这通常涉及在enter或leave钩子中访问组件的数据属性或计算属性，并据此调整动画逻辑。你可以通过this关键字在钩子函数内部访问组件实例及其属性。

注意事项

• 使用JavaScript钩子函数实现动画时，应确保done回调函数在动画结束时被调用，以避免Vue的DOM更新被阻塞。
• 考虑到性能因素，尽量避免在动画中执行重计算或DOM查询，除非绝对必要。
• 结合CSS过渡和动画使用JavaScript钩子函数可以提供更丰富的动画效果，但应注意两者之间的协同工作，避免冲突。

13.1.5.4 结论

通过利用Vue提供的JavaScript钩子函数，你可以实现比单纯依赖CSS更灵活、更强大的动画效果。这种方法尤其适用于需要动态计算动画属性或基于复杂逻辑控制动画的场景。然而，也应注意到使用JavaScript钩子函数可能会增加代码的复杂性和维护成本，因此在选择实现方式时应权衡利弊。

在本章中，我们学习了如何使用Vue的JavaScript钩子函数来实现简单的淡入淡出动画，并探讨了如何根据组件状态动态调整动画属性。通过掌握这些技巧，你将能够在Vue项目中创建更加丰富、引人入胜的用户界面。