填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

state

在附加到元素的觸發器上,宣告一個動畫狀態。

Declares an animation state within a trigger attached to an element.

state(name: string, styles: AnimationStyleMetadata, options?: { params: { [name: string]: any; }; }): AnimationStateMetadata
      
      state(name: string, styles: AnimationStyleMetadata, options?: { params: { [name: string]: any; }; }): AnimationStateMetadata
    
引數
name string

所定義的狀態的一個或多個名字(用逗號分隔)。 下面這些保留的狀態名可用於為一些特殊用例定義樣式:

One or more names for the defined state in a comma-separated string. The following reserved state names can be supplied to define a style for specific use cases:

  • void 你可以使用該名稱關聯一些樣式,用於定義當該元素從應用中移除時的樣式。比如,當 ngIf 的值為 false 時,相關元素的狀態就是 void

    void You can associate styles with this name to be used when the element is detached from the application. For example, when an ngIf evaluates to false, the state of the associated element is void.

  • *(星號)表示預設狀態。當觸發器中未宣告要設定的動畫狀態時,就會把該名稱所關聯的樣式用作回退(fallback)值。

    * (asterisk) Indicates the default state. You can associate styles with this name to be used as the fallback when the state that is being animated is not declared within the trigger.

styles AnimationStyleMetadata

一組與該狀態相關的 CSS 樣式,使用 style() 函式建立。 一旦到達該狀態,這組樣式就會永久性的應用在該元素上。

A set of CSS styles associated with this state, created using the style() function. This set of styles persists on the element once the state has been reached.

options object

一些在呼叫它時可傳給該狀態的引數。 包含 0 或多個鍵值對。

Parameters that can be passed to the state when it is invoked. 0 or more key-value pairs.

可選. 預設值是 `undefined`.
返回值

一個封裝了新狀態資料的物件。

AnimationStateMetadata: An object that encapsulates the new state data.

使用說明

使用 trigger() 函式來為動畫觸發器註冊狀態。 使用 transition() 函式來在狀態之間執行動畫。 當某個狀態在元件中啟用時,它所關聯的樣式會永久性的作用在該元素上 —— 即使該動畫已經結束了。

Use the trigger() function to register states to an animation trigger. Use the transition() function to animate between states. When a state is active within a component, its associated styles persist on the element, even when the animation ends.