Declares an animation state within a trigger attached to an element.


state(name: string, styles: AnimationStyleMetadata, options?: { params: { [name: string]: any; }; }): AnimationStateMetadata



One or more names for the defined state in a comma-separated string. The following reserved state names can be supplied to define a style for specific use cases:

所定义的状态的一个或多个名字(用逗号分隔)。 下面这些保留的状态名可用于为一些特殊用例定义样式:

  • void You can associate styles with this name to be used when the element is detached from the application. For example, when an ngIf evaluates to false, the state of the associated element is void.

    void 你可以使用该名称关联一些样式,用于定义当该元素从应用中移除时的样式。比如,当 ngIf 的值为 false 时,相关元素的状态就是 void

  • * (asterisk) Indicates the default state. You can associate styles with this name to be used as the fallback when the state that is being animated is not declared within the trigger.



A set of CSS styles associated with this state, created using the style() function. This set of styles persists on the element once the state has been reached.

一组与该状态相关的 CSS 样式,使用 style() 函数创建。 一旦到达该状态,这组样式就会永久性的应用在该元素上。


Parameters that can be passed to the state when it is invoked. 0 or more key-value pairs.

一些在调用它时可传给该状态的参数。 包含 0 或多个键值对。

可选. 默认值是 undefined.


AnimationStateMetadata: An object that encapsulates the new state data.



Use the trigger() function to register states to an animation trigger. Use the transition() function to animate between states. When a state is active within a component, its associated styles persist on the element, even when the animation ends.

使用 trigger() 函数来为动画触发器注册状态。 使用 transition() 函数来在状态之间执行动画。 当某个状态在组件中激活时,它所关联的样式会永久性的作用在该元素上 —— 即使该动画已经结束了。