Vue Academy · 课时

Transition 组件

v-enter-from、v-enter-active、v-enter-to、v-leave-* 类，以及用于自定义类的 name 属性。

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

Transition 组件的作用

Vue 内置了 <Transition> 组件：当单个元素或组件通过 v-if 或 v-show 插入或移除时，它会为其应用进入和离开动画。

它自身不会渲染任何额外的 DOM 元素——只会管理子元素上的 CSS 类和时序。

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

仅限单个元素

<Transition> 必须正好包含一个直接子元素。包裹多个同级元素不会生效——列表应改用 <TransitionGroup>。

子元素必须通过 v-if、v-show 或动态组件进行切换。

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

六个过渡类

在进入或离开期间，Vue 会按顺序自动添加和移除六个类。

v-enter-from / v-leave-from——起始状态
v-enter-active / v-leave-active——活动阶段（在此处放置过渡效果）
v-enter-to / v-leave-to——结束状态

/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

命名过渡

为过渡提供一个 name 属性，将类的前缀从 v- 改为您的名称。使用 name="fade" 时，类会变为 fade-enter-from、fade-enter-active 等。

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

完整的淡入淡出示例

经典的淡入淡出效果会对 opacity 进行动画处理。元素一开始完全透明，活动类声明过渡效果，目标类则让它变为完全不透明。

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

逐步了解进入序列

元素插入时：

在绘制之前添加 fade-enter-from 和 fade-enter-active（不透明度为 0）。
在下一帧中移除 fade-enter-from 并添加 fade-enter-to，因此不透明度会向 1 动画变化。
过渡结束后，同时移除 active 和 to 类。

/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

离开序列

离开过程与进入过程相似，会使用 leave 类。通常可以让两个方向共用同一条活动规则。

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

v-if 与 v-show

两者都会触发过渡。v-if 会实际挂载和卸载元素，而 v-show 会将元素保留在 DOM 中并切换 display。对于 v-show，Vue 会在活动阶段前后处理显示状态的切换，因此动画仍然可见。

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

首次渲染时显示

默认情况下，过渡不会在首次渲染时运行。添加 appear 属性，使组件首次挂载时播放进入动画。

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

在两个元素之间过渡

在一个 Transition 中使用 v-if / v-else 来切换两个元素。如果它们使用相同的标签，请为每个元素提供唯一的 key，这样 Vue 才会将它们视为不同元素。

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

减少动效与无障碍

请尊重偏好较少动效的用户。使用 prefers-reduced-motion 媒体查询禁用或缩短过渡，以免动画造成不适。

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}

快速检查

fade-enter-from 定义了什么？

回顾

您已经学习了内置的 <Transition> 组件：它包裹一个由 v-if/v-show 切换的元素，应用六个 CSS 类（enter-from、enter-active、enter-to 以及对应的离开类），支持名称前缀、首次渲染时显示，以及用于切换的模式。

常见问题解答

「Transition 组件」课时是免费的吗？

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

「Transition 组件」这节课中我会学到什么？

v-enter-from、v-enter-active、v-enter-to、v-leave-* 类，以及用于自定义类的 name 属性。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「Transition 组件」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy