Vue.js动画钩子函数

简介[编辑 | 编辑源代码]

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

在Vue中，动画生命周期被划分为6个关键阶段，每个阶段对应一个特定的钩子函数。与纯CSS动画相比，钩子函数的优势在于：

可实现复杂的动画逻辑（如序列动画）
支持与第三方动画库（如GSAP、Anime.js）集成
提供动画过程的状态追踪

钩子函数列表[编辑 | 编辑源代码]

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

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

生命周期流程图[编辑 | 编辑源代码]

基础用法[编辑 | 编辑源代码]

以下示例展示如何使用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>

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

与第三方库集成[编辑 | 编辑源代码]

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

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
      })
    }
  }
}

高级技巧[编辑 | 编辑源代码]

动画队列[编辑 | 编辑源代码]

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

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)
  }
}