stylelink

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; } | Array<'*' | { [key: string]: string | number; }>): AnimationStyleMetadata

      
      style(tokens: '*' | {
    [key: string]: string | number;
} | Array<'*' | {
    [key: string]: string | number;
}>): AnimationStyleMetadata
    

Parameters

tokens

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.

Returns

AnimationStyleMetadata: An object that encapsulates the style data.

Usage noteslink

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 })

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

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