1. 动画模块导入：
在使用 Angular 动画之前，需要导入 BrowserAnimationsModule 模块。这个模块是 Angular 提供的，它包含了 Angular 动画的核心功能。
// app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [BrowserAnimationsModule, ...],
...
})
export class AppModule { }
2. 使用 @angular/animations 模块：
在 Angular 动画中，你会使用 @angular/animations 模块提供的一些函数，主要包括：
- trigger: 定义一个动画触发器。
- state: 定义一个组件状态。
- style: 定义一个样式。
- transition: 定义状态之间的过渡。
- animate: 定义动画的执行。
这些函数的组合允许你创建复杂的动画序列。
3. 动画触发器 (trigger)：
trigger 函数允许你定义一个动画触发器，其中包含一个或多个状态以及状态之间的过渡。
trigger('myAnimationTrigger', [
state('initial', style({ opacity: 0 })),
state('final', style({ opacity: 1 })),
transition('initial => final', animate('500ms')),
transition('final => initial', animate('500ms'))
])
4. 状态 (state)：
state 函数用于定义组件的不同状态，你可以在动画触发器中切换这些状态。
state('initial', style({ opacity: 0 })),
state('final', style({ opacity: 1 })),
5. 样式 (style)：
style 函数用于定义一个状态的样式。
style({ opacity: 0 })
6. 过渡 (transition)：
transition 函数定义了状态之间的过渡，包括过渡的方向。
transition('initial => final', animate('500ms')),
transition('final => initial', animate('500ms'))
7. 执行动画 (animate)：
animate 函数定义了动画的执行，包括持续时间和缓动函数。
animate('500ms ease-in')
8. 在模板中使用动画：
在组件的模板中使用 [@triggerName] 来触发动画。例如：
<div [@myAnimationTrigger]="animationState"></div>
9. 动画生命周期钩子：
Angular 提供了一些生命周期钩子，你可以使用这些钩子来监听动画的生命周期事件，例如 start、done 等。
(@myAnimationTrigger.start)="animationStarted($event)"
(@myAnimationTrigger.done)="animationDone($event)"
10. 进场和离场动画：
Angular 允许你为组件的进场和离场分别定义动画，通过 :enter 和 :leave 伪类选择器。
transition(':enter', animate('500ms ease-out')),
transition(':leave', animate('500ms ease-in'))
以上只是 Angular 动画系统的基础概念。在实践中，你可以通过组合这些概念来创建各种复杂的动画效果。Angular 动画系统的强大之处在于其结构化的API和灵活性，允许你在应用中轻松添加各种动画。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4979/Angular