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
tokens | "*" | { [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:
Auto-styling can be used to define a state that depends on layout or other environmental factors. |
AnimationStyleMetadata
: An object that encapsulates the style data.
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 a component to animate from a height of 0 up to the height of the parent element:
style({ height: 0 }), animate("1s", style({ height: "*" }))
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/animations/style