填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

style

声明一个包含 CSS 属性/样式的键值对象,可在动画序列中用作动画状态(state),或在调用 animate()keyframes() 时作为传入的样式数据。

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
      
      style(tokens: "*" | { [key: string]: string | number; } | ("*" | { [key: string]: string | number; })[]): AnimationStyleMetadata
    
参数
tokens "*" | { [key: string]: string | number; } | ("*" | { [key: string]: string | number; })[]

一组 CSS 样式或与动画状态相关联的 HTML 样式。 它可以是下列值之一:

A set of CSS styles or HTML styles associated with an animation state. The value can be any of the following:

  • 一个键值对,把 CSS 属性和值关联起来。

    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.

返回值

一个封装了样式数据的对象。

AnimationStyleMetadata: An object that encapsulates the style data.

使用说明

下面的例子创建了一些带有一组 CSS 属性值的动画样式:

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 })
      
      // string values for CSS properties
style({ background: "red", color: "blue" })

// numerical pixel values
style({ width: 100, height: 0 })
    

下面的例子使用了自动样式,以允许此动画将组件的高度从 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: "*" }))
      
      style({ height: 0 }),
animate("1s", style({ height: "*" }))