Vue.js的JS钩子函数是解决CSS动画局限性的关键能力，提供8个按入场/退场分组的钩子，需正确调用done、禁用CSS类注入并强制重排，可集成GSAP等库实现复杂动效与异步控制。
Vue.js 的 JavaScript 钩子函数不是“锦上添花”，而是解决 CSS 动画力所不及场景的关键能力。它不替代 CSS 过渡，而是在需要精确控制、异步操作或动态计算时接管动画流程。
八个钩子函数的分工与触发时机
Vue 为单元素过渡定义了 8 个 JS 钩子，按入场（enter）和退场（leave）分组，每个阶段职责明确：
-
before-enter / before-leave：DOM 插入/移除前执行，适合初始化样式（如设
opacity: 0、transform: scale(0.8)），避免闪动 -
enter / leave：动画主体逻辑所在，必须调用
done回调（或返回 Promise）通知 Vue 动画结束；若不调用，过渡会同步完成，无动画效果 - after-enter / after-leave：动画彻底完成后执行，适合清理、触发后续逻辑（如发送埋点、释放资源）
- enter-cancelled / leave-cancelled：仅在 v-show 切换或过渡被中断时触发，用于还原中间态（如恢复 opacity 或清除定时器）
正确使用 JS 钩子的三个关键点
很多初学者写的 JS 动画“没反应”或“只进不出”，往往卡在这几个细节上：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
-
必须传入 done 参数并调用它：在
enter(el, done)和leave(el, done)中，done()是 Vue 等待动画结束的信号。用setTimeout(done, 300)或动画库的完成回调均可 - 建议设置 :css="false"：显式关闭 CSS 类名自动注入，避免 Vue 同时尝试应用 CSS 类和 JS 动画，造成冲突或样式覆盖
-
强制重排触发（el.offsetWidth）：在
enter中修改样式后立即读取el.offsetWidth，可强制浏览器同步计算样式，确保 transition 能从初始状态开始——这是淡入动画常失效的根本原因
与第三方动画库（如 GSAP、Velocity）集成
JS 钩子天然适配主流动画库，把复杂序列、缓动、时间轴控制交给专业工具：
立即学习“Java免费学习笔记（深入）”；
- 在
enter中用 GSAP 执行多属性动画：gsap.to(el, { opacity: 1, y: 0, duration: 0.6, ease: "power2.out" })，并在 onComplete 回调里调用done - 在
leave中可结合异步操作：先调用 API 校验权限，成功后再启动飞出动画，失败则调用done中断过渡 - 多个元素联动？用
gsap.timeline()统一调度，比手写 setTimeout 更可靠、易维护
常见组合模式与实用场景
纯 JS 钩子不是炫技，而是为真实需求服务：
-
购物车添加动效：点击后先执行
before-enter定位商品图位置，enter中用 transform 模拟飞入购物车图标，after-enter更新数量 badge -
表单提交反馈：提交按钮禁用 →
before-leave收起旧内容 →enter淡入加载骨架 → 接口返回后after-enter替换为结果 -
模态框拖拽入场：在
enter中监听 mousemove 实时计算偏移量，配合 requestAnimationFrame 实现丝滑跟随
