@angular/animations

style

function

deprecatedsince v20.2

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().

Deprecation warning

Use animate.enter or animate.leave instead. Intent to remove in v23

API

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

style

AnimationStyleMetadata

@deprecated

Use animate.enter or animate.leave instead. Intent to remove in v23

@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: "*" }))