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

stylelink

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

Declares a key/value object containing CSS properties/styles that\ncan then be used for an animation state, within an animation sequence,\nor as styling data for calls to animate() and keyframes().

\n\n \n
\n \n \n \n\n
\n \n\n style(tokens: \"*\" | { [key: string]: string | number; } | (\"*\" | { [key: string]: string | number; })[]): AnimationStyleMetadata\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n tokens\n \"*\" | { [key: string]: string | number; } | (\"*\" | { [key: string]: string | number; })[]\n

A set of CSS styles or HTML styles associated with an animation state.\nThe value can be any of the following:

\n
    \n
  • A key-value style pair associating a CSS property with a value.
    • \n
  • An array of key-value style pairs.
    • \n
  • An asterisk (*), to use auto-styling, where styles are derived from the element\nbeing animated and applied to the animation when it starts.
    • \n
\n

Auto-styling can be used to define a state that depends on layout or other\nenvironmental factors.

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

AnimationStyleMetadata: An object that encapsulates the style data.

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

Usage noteslink

\n

The following examples create animation styles that collect a set of\nCSS property values:

\n\n// string values for CSS properties\nstyle({ background: \"red\", color: \"blue\" })\n\n// numerical pixel values\nstyle({ width: 100, height: 0 })\n\n

The following example uses auto-styling to allow a component to animate from\na height of 0 up to the height of the parent element:

\n\nstyle({ height: 0 }),\nanimate(\"1s\", style({ height: \"*\" }))\n\n\n
\n\n\n\n
\n
\n\n\n" }