@angular/animations

style

function

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

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

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

          
            // string values for CSS propertiesstyle({ background: "red", color: "blue" })// numerical pixel valuesstyle({ width: 100, height: 0 })

The following example uses auto-styling to allow an element to animate from a height of 0 up to its full height:

          
            style({ height: 0 }),animate("1s", style({ height: "*" }))

style

AnimationStyleMetadata

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

@paramtokens"*" | { [key: string]: string | number; } | ("*" | { [key: string]: string | number; })[]

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

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

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

@returnsAnimationStyleMetadata

Usage notes

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

          
            // string values for CSS propertiesstyle({ background: "red", color: "blue" })// numerical pixel valuesstyle({ width: 100, height: 0 })

The following example uses auto-styling to allow an element to animate from a height of 0 up to its full height:

          
            style({ height: 0 }),animate("1s", style({ height: "*" }))