{ "id": "api/animations/state", "title": "state", "contents": "\n\n
\n
\n
\n \n API > @angular/animations\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

statelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

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

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

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

\n
    \n
  • void You can associate styles with this name to be used when\nthe element is detached from the application. For example, when an ngIf evaluates\nto false, the state of the associated element is void.
    • \n
  • * (asterisk) Indicates the default state. You can associate styles with this name\nto be used as the fallback when the state that is being animated is not declared\nwithin the trigger.
    • \n
\n\n
\n \n styles\n AnimationStyleMetadata\n

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

\n\n
\n \n options\n object\n

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

\n

Optional. Default is undefined.

\n\n
\n\n \n
Returns
\n

AnimationStateMetadata: An object that encapsulates the new state data.

\n \n \n\n\n \n\n \n
\n\n\n \n\n \n\n\n\n \n
\n

Usage noteslink

\n

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

\n\n
\n\n\n\n
\n
\n\n\n" }