@angular/animations

style

함수

사용 중단 권고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().

사용 중단을 권고합니다.

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;

@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

사용 시 참고사항

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