Vue Academy · 课时

JavaScript 过渡钩子

@before-enter、@enter、@after-enter、@leave 钩子，以及使用 GSAP 实现复杂动画。

JavaScript 过渡钩子 是 CoddyKit 上的免费 Vue Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

为什么使用 JavaScript 钩子

CSS 类可以覆盖大多数情况，但有些动画需要 JavaScript，例如集成 GSAP 等库、制作画布动画或计算动态值。<Transition> 正好为此提供了生命周期钩子。

可用的钩子

Vue 会为每个阶段触发事件：@before-enter、@enter、@after-enter、@enter-cancelled，以及相应的离开钩子。

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @leave="onLeave"
>
  <div v-if="show">Animated by JS</div>
</Transition>

进入前钩子设置初始状态

@before-enter 会接收 DOM 元素，并在插入之前运行。您可以使用它设置初始样式，就像使用 enter-from 类一样。

function onBeforeEnter(el) {
  el.style.opacity = 0;
  el.style.transform = "translateY(20px)";
}

进入钩子接收元素和完成回调

@enter 会接收两个参数：元素和一个 done 回调。您可以为元素制作动画，然后在动画结束时调用 done()，让 Vue 知道过渡已经结束。

function onEnter(el, done) {
  // animate to final state
  el.style.transition = "all 0.4s ease";
  el.style.opacity = 1;
  el.style.transform = "translateY(0)";
  el.addEventListener("transitionend", done, { once: true });
}

务必调用 done

如果忘记调用 done()，Vue 就会一直等待，过渡永远不会完成；after-enter 也不会触发，元素还可能停留在动画执行了一半的状态。在由 JS 驱动的钩子中，调用它是必须的。

function onEnter(el, done) {
  // ... animate ...
  setTimeout(done, 400); // fallback if no transitionend
}

使用完成回调的离开钩子

@leave 钩子的工作方式相同：先让元素执行离开动画，然后调用 done()，这样 Vue 就会将它从 DOM 中移除。

function onLeave(el, done) {
  el.style.transition = "all 0.3s ease";
  el.style.opacity = 0;
  el.addEventListener("transitionend", done, { once: true });
}

使用 after-enter 进行清理

@after-enter 会在进入动画完成后运行。您可以使用它移除内联样式、重置过渡属性，或触发后续逻辑。

function onAfterEnter(el) {
  el.style.transition = "";
  el.style.transform = "";
}

使用 :css="false" 跳过 CSS

如果动画完全由 JS 执行，请设置 :css="false"。这会告诉 Vue 完全跳过 CSS 类检测，只依靠您的 done 回调进行计时，同时也能避免 CSS 意外产生干扰。

<Transition
  :css="false"
  @enter="onEnter"
  @leave="onLeave"
>
  <div v-if="show">Pure JS animation</div>
</Transition>

集成 GSAP

使用动画库时，JS 钩子非常有用。GSAP 可以为元素制作补间动画，并将 done 作为其 onComplete 回调。

function onEnter(el, done) {
  gsap.from(el, {
    opacity: 0,
    y: 30,
    duration: 0.4,
    onComplete: done
  });
}

已取消的钩子

如果过渡被中断（例如用户快速切换），@enter-cancelled 和 @leave-cancelled 就会触发。您可以使用它们终止正在运行的补间动画，避免留下残余状态。

function onEnterCancelled(el) {
  gsap.killTweensOf(el);
}

何时选择 JS 钩子

当您需要物理效果、每个元素的动态值、库集成或精确的执行顺序时，可以选择 JS 钩子。对于简单的淡入淡出和滑动效果，CSS 类更简单，性能也更好。

快速检查

为什么要在 JavaScript 钩子中传入 :css="false"？

回顾

您学习了 JS 过渡钩子：@before-enter（设置初始状态）、@enter/@leave（执行动画，然后调用 done）、@after-enter（进行清理），还学习了使用 :css="false" 绕过 CSS 类，以及用于处理中断的已取消钩子。

常见问题解答

「JavaScript 过渡钩子」课时是免费的吗？

是的 — 「JavaScript 过渡钩子」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「JavaScript 过渡钩子」这节课中我会学到什么？

@before-enter、@enter、@after-enter、@leave 钩子，以及使用 GSAP 实现复杂动画。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「JavaScript 过渡钩子」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy