模板语法
服务端渲染
API / @angular/animations

state

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

在附加到元素的触发器上，声明一个动画状态。

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

参数

name

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.

    *（星号）表示默认状态。当触发器中未声明要设置的动画状态时，就会把该名称所关联的样式用作回退（fallback）值。

styles

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() 函数创建。 一旦到达该状态，这组样式就会永久性的应用在该元素上。

options

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() 函数来在状态之间执行动画。 当某个状态在组件中激活时，它所关联的样式会永久性的作用在该元素上 —— 即使该动画已经结束了。