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

transition

宣告一個轉場動畫,以便在滿足給定條件時執行一系列動畫步驟。該條件是一個邏輯型表示式或一個函式, 該函式比較以前和現在的動畫狀態,如果應該開始轉場則返回 true。 當滿足所定義的轉場動畫的狀態標準時,就會開始執行相關的動畫。

Declares an animation transition as a sequence of animation steps to run when a given condition is satisfied. The condition is a Boolean expression or function that compares the previous and current animation states, and returns true if this transition should occur. When the state criteria of a defined transition are met, the associated animation is triggered.

      
      transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any; }) => boolean), steps: AnimationMetadata | AnimationMetadata[], options: AnimationOptions = null): AnimationTransitionMetadata
    
引數
stateChangeExpr string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any; }) => boolean)

一個邏輯表示式或一個函式,該函式用來比較以前和現在的動畫狀態,如果應該開始轉場,則返回 true。注意,"true" 和 "false" 分別對應於 1 和 0。 在動畫觸發器所在的元素中,每當狀態發生變化時該表示式都會求值一次。 當該表示式求值為真時,則執行這些動畫步驟。

A Boolean expression or function that compares the previous and current animation states, and returns true if this transition should occur. Note that "true" and "false" match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the animation trigger element. The animation steps run when the expression evaluates to true.

  • 一個 "state1 => state2" 格式的狀態變更字串,每一側都是一個事先定義好的動畫狀態,或者用星號(*)來動態獲取起始或結束狀態。

    A state-change string takes the form "state1 => state2", where each side is a defined animation state, or an asterix (*) to refer to a dynamic start or end state.

    • 該表示式字串可以包含多個逗號分隔的狀態,比如 "state1 => state2, state3 => state4"。

      The expression string can contain multiple comma-separated statements; for example "state1 => state2, state3 => state4".

    • 特殊值 :enter 表示進入此狀態時的轉場,等價於 "void => ",:leave 表示退出此狀態時的轉場,等價於 " => void"。

      Special values :enter and :leave initiate a transition on the entry and exit states, equivalent to "void => " and " => void".

    • 特殊值 :increment:decrement 表示數字型值增加或減小時的轉場。

      Special values :increment and :decrement initiate a transition when a numeric value has increased or decreased in value.

  • 一個函式,每當動畫觸發器所在的元素髮生了狀態變化時就會執行。 當該函式返回 true 時,就會執行這些動畫步驟。

    A function is executed each time a state change occurs in the animation trigger element. The animation steps run when the function returns true.

steps AnimationMetadata | AnimationMetadata[]

一個或多個由 animate()sequence() 函式返回的動畫物件,用於描述從一個狀態到另一個狀態的轉變過程。 當傳入一個數組時,預設當做一個動畫序列使用。

One or more animation objects, as returned by the animate() or sequence() function, that form a transformation from one state to another. A sequence is used by default when you pass an array.

options AnimationOptions

一個配置物件,可以包含一個開始動畫之前的延遲值,和一些由開發人員定義的引數。在這些引數中提供的值會被用作樣式的預設值, 在呼叫時呼叫者可以重寫這些值。

An options object that can contain a delay value for the start of the animation, and additional developer-defined parameters. Provided values for additional parameters are used as defaults, and override values can be passed to the caller on invocation.

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

一個封裝了轉場資料的物件。

AnimationTransitionMetadata: An object that encapsulates the transition data.

使用說明

與元件關聯的範本會把動畫觸發器繫結到某個元素上。

The template associated with a component binds an animation trigger to an element.

      
      <!-- somewhere inside of my-component-tpl.html -->
<div [@myAnimationTrigger]="myStatusExp">...</div>
    

所有轉場動畫以及用於供轉場動畫使用的命名狀態,都是在動畫觸發器中定義的,

All transitions are defined within an animation trigger, along with named states that the transitions change to and from.

      
      trigger("myAnimationTrigger", [
 // define states
 state("on", style({ background: "green" })),
 state("off", style({ background: "grey" })),
 ...]
    

注意,當你在 group()transition() 中呼叫 sequence() 函式時,除非其內部動畫步驟已經執行完了, 否則不會繼續執行後續步驟。

Note that when you call the sequence() function within a group() or a transition() call, execution does not continue to the next instruction until each of the inner animation steps have completed.

語法範例

Syntax examples

下面的例子中定義了一些在兩個已定義狀態(和預設狀態)之間的轉場動畫,使用了多種選項:

The following examples define transitions between the two defined states (and default states), using various options:

      
      // Transition occurs when the state value
// bound to "myAnimationTrigger" changes from "on" to "off"
transition("on => off", animate(500))
// Run the same animation for both directions
transition("on <=> off", animate(500))
// Define multiple state-change pairs separated by commas
transition("on => off, off => void", animate(500))
    

狀態變更表示式的一些特殊值

Special values for state-change expressions

  • 當元素插入到頁面中,並且目標狀態未知時的所有狀態變更:

    Catch-all state change for when an element is inserted into the page and the destination state is unknown:

      
      transition("void => *", [
 style({ opacity: 0 }),
 animate(500)
 ])
    
  • 任意兩個狀態之間的變更:

    Capture a state change between any states:

    transition("* => *", animate("1s 0s"))

  • 進場和立場時的轉場動畫:

    Entry and exit transitions:

      
      transition(":enter", [
  style({ opacity: 0 }),
  animate(500, style({ opacity: 1 }))
  ]),
transition(":leave", [
  animate(500, style({ opacity: 0 }))
  ])
    
  • 使用 :increment:decrement 來開始轉場:

    Use :increment and :decrement to initiate transitions:

      
      transition(":increment", group([
 query(':enter', [
    style({ left: '100%' }),
    animate('0.5s ease-out', style('*'))
  ]),
 query(':leave', [
    animate('0.5s ease-out', style({ left: '-100%' }))
 ])
]))

transition(":decrement", group([
 query(':enter', [
    style({ left: '100%' }),
    animate('0.5s ease-out', style('*'))
  ]),
 query(':leave', [
    animate('0.5s ease-out', style({ left: '-100%' }))
 ])
]))
    

狀態變更函式

State-change functions

下面的例子把 fromState 指定為狀態變更函式,當它返回 true 時就會執行動畫:

Here is an example of a fromState specified as a state-change function that invokes an animation when true:

      
      transition((fromState, toState) =>
 {
  return fromState == "off" && toState == "on";
 },
 animate("1s 0s"))
    

把動畫播放到最終狀態

Animating to the final state

如果轉場動畫的最後一步是呼叫 animate(),並且只傳入時序引數卻不帶樣式資料,則該步驟會被自動當做動畫弧的終點, 以便讓該元素達到最終狀態。 Angular 會根據需要自動新增或移除 CSS 樣式,以確保該元素處於正確的最終狀態。

If the final step in a transition is a call to animate() that uses a timing value with no style data, that step is automatically considered the final animation arc, for the element to reach the final state. Angular automatically adds or removes CSS styles to ensure that the element is in the correct final state.

下面的例子定義了一個轉場動畫,它先隱藏該元素,然後確保它可以正確設定到觸發器處於啟用狀態時的動畫:

The following example defines a transition that starts by hiding the element, then makes sure that it animates properly to whatever state is currently active for trigger:

      
      transition("void => *", [
  style({ opacity: 0 }),
  animate(500)
 ])
    

邏輯值匹配

Boolean value matching

如果觸發器的繫結值是邏輯型的,它就可以使用一個與 truefalse 或 1、0 進行比較的轉場表示式進行匹配。例如:

If a trigger binding value is a Boolean, it can be matched using a transition expression that compares true and false or 1 and 0. For example:

      
      // in the template
<div [@openClose]="open ? true : false">...</div>
// in the component metadata
trigger('openClose', [
  state('true', style({ height: '*' })),
  state('false', style({ height: '0px' })),
  transition('false <=> true', animate(500))
])