转场（Transitions）：
转场是指从一个状态过渡到另一个状态的过程，它在Angular动画中用于定义状态之间的动画效果。在Angular中，你可以使用 transition 函数来定义转场。
transition('state1 => state2', animate('500ms ease-in'))
上述代码表示从状态 state1 过渡到 state2，过渡的动画效果是在500毫秒内以“ease-in”的缓动函数进行的。你可以定义多个转场，从而形成一个状态机。
触发器（Triggers）：
触发器用于定义一组状态和与之相关联的转场。在Angular中，你可以使用 trigger 函数来创建触发器。触发器允许你定义组件内的动画状态，并通过在模板中使用 [@triggerName] 来触发这些状态。
trigger('myAnimationTrigger', [
state('state1', style({ opacity: 0 })),
state('state2', style({ opacity: 1 })),
transition('state1 => state2', animate('500ms ease-in'))
])
上述代码中，myAnimationTrigger 是触发器的名称，它定义了两个状态 state1 和 state2 以及在这两个状态之间的过渡动画。
在模板中使用触发器：
在组件的模板中，你可以使用 [@triggerName] 语法来触发定义的状态。例如：
<div [@myAnimationTrigger]="animationState"></div>
上述代码中，animationState 是组件中的一个属性，通过改变它的值，你可以触发与之关联的动画状态。
多个触发器：
你可以在同一个组件中定义多个触发器，并在模板中使用它们。这样，你可以在不同的情境下使用不同的动画。
trigger('trigger1', ...),
trigger('trigger2', ...)
动画生命周期钩子：
Angular提供了一些生命周期钩子，用于监听动画的生命周期事件。例如，start 和 done 钩子可以用于监听动画的开始和结束事件。
<div [@myAnimationTrigger]="animationState"
(@myAnimationTrigger.start)="animationStarted($event)"
(@myAnimationTrigger.done)="animationDone($event)"></div>
在上述代码中，animationStarted 和 animationDone 是组件中定义的方法，用于处理动画开始和结束时的逻辑。
以上是关于Angular转场与触发器的基本介绍。使用这些概念，你可以在Angular应用中创建丰富而灵活的动画效果。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4980/Angular