@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;

Usage Notes

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

// string values for CSS properties
style({ background: "red", color: "blue" })

// numerical pixel values
style({ 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: "*" }))