编辑“︁Vue.js动画钩子函数”︁

{{DISPLAYTITLE:Vue.js动画钩子函数}}

== 简介 ==
'''Vue.js动画钩子函数'''是Vue过渡与动画系统的核心组成部分，允许开发者在CSS过渡/动画的各个阶段插入JavaScript逻辑。这些钩子函数与Vue的`<transition>`组件协同工作，为元素进入/离开DOM时提供精细化的动画控制。

在Vue中，动画生命周期被划分为6个关键阶段，每个阶段对应一个特定的钩子函数。与纯CSS动画相比，钩子函数的优势在于：
* 可实现复杂的动画逻辑（如序列动画）
* 支持与第三方动画库（如GSAP、Anime.js）集成
* 提供动画过程的状态追踪

== 钩子函数列表 ==
Vue提供了以下动画钩子函数（按执行顺序排列）：

{| class="wikitable"
|-
! 钩子函数 !! 触发时机 !! 典型用途
|-
| <code>before-enter</code> || 进入动画开始前 || 初始化元素样式
|-
| <code>enter</code> || 进入动画执行时 || 定义进入动画
|-
| <code>after-enter</code> || 进入动画完成后 || 清理操作
|-
| <code>enter-cancelled</code> || 进入动画被中断时 || 中断处理
|-
| <code>before-leave</code> || 离开动画开始前 || 记录初始状态
|-
| <code>leave</code> || 离开动画执行时 || 定义离开动画
|-
| <code>after-leave</code> || 离开动画完成后 || DOM元素移除
|-
| <code>leave-cancelled</code> || 离开动画被中断时 || 中断恢复
|}

== 生命周期流程图 ==
<mermaid>
graph TD
    A[元素插入DOM] --> B[before-enter]
    B --> C[enter]
    C --> D{动画完成?}
    D -->|是| E[after-enter]
    D -->|否| F[enter-cancelled]
    G[元素移除DOM] --> H[before-leave]
    H --> I[leave]
    I --> J{动画完成?}
    J -->|是| K[after-leave]
    J -->|否| L[leave-cancelled]
</mermaid>

== 基础用法 ==
以下示例展示如何使用JavaScript钩子实现一个简单的淡入动画：

<syntaxhighlight lang="javascript">
<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
    <div v-if="show" class="box">Hello Vue!</div>
  </transition>
  <button @click="show = !show">Toggle</button>
</template>

<script>
export default {
  data() {
    return { show: false }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transform = 'translateY(20px)'
    },
    enter(el, done) {
      // 使用requestAnimationFrame确保动画流畅
      requestAnimationFrame(() => {
        el.style.transition = 'all 0.5s ease-out'
        el.style.opacity = 1
        el.style.transform = 'translateY(0)'
        
        // 监听过渡结束事件
        el.addEventListener('transitionend', done)
      })
    },
    afterEnter(el) {
      el.style.transition = ''
    }
  }
}
</script>
</syntaxhighlight>

'''代码解析：'''
1. <code>before-enter</code>：设置元素的初始状态（透明且下移20px）
2. <code>enter</code>：应用过渡效果，恢复到完全可见状态
3. <code>after-enter</code>：清理过渡样式

== 与第三方库集成 ==
Vue动画钩子特别适合与专业动画库结合。以下是使用GSAP实现弹性动画的示例：

<syntaxhighlight lang="javascript">
import { gsap } from 'gsap'

export default {
  methods: {
    enter(el, done) {
      gsap.from(el, {
        duration: 1,
        opacity: 0,
        y: 50,
        ease: "elastic.out(1, 0.5)",
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        duration: 0.7,
        opacity: 0,
        y: -30,
        ease: "back.in(1.7)",
        onComplete: done
      })
    }
  }
}
</syntaxhighlight>

== 高级技巧 ==

=== 动画队列 ===
通过钩子函数可以实现序列动画（多个元素按顺序动画）：

<syntaxhighlight lang="javascript">
methods: {
  enter(el, done) {
    const delay = el.dataset.index * 150
    setTimeout(() => {
      el.style.transition = 'all 0.3s ease'
      el.style.opacity = 1
      el.style.transform = 'translateX(0)'
      el.addEventListener('transitionend', done)
    }, delay)
  }
}
</syntaxhighlight>

=== 性能优化 ===
对于复杂动画，建议：
* 使用<code>will-change</code>属性提示浏览器优化
* 在<code>before-enter</code>中设置<code>el.style.willChange = 'transform, opacity'</code>
* 在<code>after-enter</code>中重置为<code>auto</code>

== 数学原理 ==
动画本质是随时间变化的属性插值。线性动画可表示为：
<math>
f(t) = p_{start} + (p_{end} - p_{start}) \cdot \min(t / d, 1)
</math>
其中：
* <math>p_{start}</math> = 起始值
* <math>p_{end}</math> = 结束值
* <math>d</math> = 持续时间
* <math>t</math> = 当前时间

== 常见问题 ==
'''Q: 为什么需要调用done回调？'''
A: Vue需要明确知道动画何时完成，对于CSS过渡会自动检测，但在JavaScript动画中必须手动调用。

'''Q: 如何防止动画闪烁？'''
A: 在<code>before-enter</code>中设置初始状态，避免元素以默认状态短暂显示。

'''Q: 钩子函数能用于列表动画吗？'''
A: 可以，但更推荐使用<code><transition-group></code>的专用钩子。

== 最佳实践 ==
1. 对于简单动画优先使用CSS过渡
2. 复杂动画考虑GSAP等专业库
3. 移动端注意性能影响
4. 始终提供动画终止的清理逻辑
5. 考虑可访问性（减少运动敏感用户的动画）

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js过渡与动画]]