Angular Academy · 课时

进入与离开动画

Q: 「进入与离开动画」这节课中我会学到什么？

为元素的进入和离开制作动画 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

为元素的进入和离开制作动画

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

为元素出现和消失添加动画

您经常会希望元素在出现或消失时播放动画，例如项目被添加到列表或从列表中移除时。Angular 为此提供了 :enter 和 :leave 别名。

空状态与元素出现和消失

不在 DOM 中的元素处于 void 状态。进入表示 void => *，离开表示 * => void。

进入别名

:enter 是 void => * 的简写。使用它可以为元素添加进入时的动画。

transition(':enter', [
  style({ opacity: 0 }),
  animate('300ms', style({ opacity: 1 }))
])

离开别名

:leave 是 * => void 的简写。Angular 会将元素保留在 DOM 中，直到离开动画结束。

transition(':leave', [
  animate('300ms', style({ opacity: 0 }))
])

通过控制流触发

将触发器应用于由 @if 或 @for 管理的元素。添加或移除这些元素时，会触发进入或离开动画。

@if (visible()) {
  <div [@fade]>Hello</div>
}

淡入淡出触发器

下面是一个可复用的淡入淡出触发器。

trigger('fade', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('200ms', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('200ms', style({ opacity: 0 }))
  ])
])

滑入示例

结合变换和不透明度，为进入时的元素创建滑入效果。

transition(':enter', [
  style({ transform: 'translateY(-10px)', opacity: 0 }),
  animate('250ms ease-out',
    style({ transform: 'translateY(0)', opacity: 1 }))
])

列表项目动画

将触发器放在 @for 内的每个项目上；添加或移除项目时，每个项目都会独立播放动画。

@for (item of items(); track item.id) {
  <li [@fade]>{{ item.name }}</li>
}

离开为何需要动画引擎

通常，被移除的元素会立即消失。动画引擎会拦截移除操作，暂时保留节点，运行 :leave 动画，然后再将其移除，整个过程会自动完成。

禁用动画

绑定 @.disabled 可以有条件地跳过动画，适用于减少动态效果偏好或初始渲染等场景。

<div [@.disabled]="prefersReducedMotion">...</div>

最佳实践

请让进入和离开动画保持简短而含蓄。尊重 prefers-reduced-motion 设置。为实现流畅效果，请为变换和不透明度添加动画（它们对 GPU 友好），而不要为布局属性添加动画。

快速检查

测试您对进入/离开动画的理解。

回顾

您了解到，:enter（void => *）和 :leave（* => void）会在元素添加和移除时为其设置动画，并与 @if/@for 配合使用。动画引擎会保留正在离开的节点，直到其动画完成。

常见问题解答

「进入与离开动画」课时是免费的吗？

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

「进入与离开动画」这节课中我会学到什么？

为元素的进入和离开制作动画你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

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

「进入与离开动画」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Angular Academy