编辑“︁Vue.js动画钩子函数”︁（章节）

== 基础用法 ==
以下示例展示如何使用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>：清理过渡样式