填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫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: "*" }))