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

trigger

建立一個有名字的動畫觸發器,包含一個 state()transition() 的列表,當此觸發器的繫結表示式發生變化時,它們就會重新求值。

Creates a named animation trigger, containing a list of state() and transition() entries to be evaluated when the expression bound to the trigger changes.

trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata
      
      trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata
    
引數
name string

一個標識字串。

An identifying string.

definitions AnimationMetadata[]

一個動畫定義物件,包含由 state()transition() 宣告構成的陣列。

An animation definition object, containing an array of state() and transition() declarations.

返回值

用於包裝該觸發器資料的物件。

AnimationTriggerMetadata: An object that encapsulates the trigger data.

使用說明

@Component 元資料的 animations 部分定義一個動畫觸發器。 在範本中,可以按名字參考該觸發器,並把它繫結到一個觸發器表示式,該表示式的求值結果是一個已定義的動畫狀態,格式如下:

Define an animation trigger in the animations section of @Component metadata. In the template, reference the trigger by name and bind it to a trigger expression that evaluates to a defined animation state, using the following format:

[@triggerName]="expression"

動畫觸發器繫結會把所有值轉換成字串,然後根據其舊值和當前值匹配出一個轉場動畫。 對於邏輯值,可以用 '1''true' 來代表 true,用 '0''false' 來代表 false

Animation trigger bindings convert all values to strings, and then match the previous and current values against any linked transitions. Booleans can be specified as 1 or true and 0 or false.

用法範例

Usage Example

下面的例子使用指定的名字建立了一個動畫觸發器的參考。 此動畫的值應該是一個由狀態宣告和轉場宣告組成的陣列。

The following example creates an animation trigger reference based on the provided name value. The provided animation value is expected to be an array consisting of state and transition declarations.

@Component({ selector: "my-component", templateUrl: "my-component-tpl.html", animations: [ trigger("myAnimationTrigger", [ state(...), state(...), transition(...), transition(...) ]) ] }) class MyComponent { myStatusExp = "something"; }
      
      @Component({
  selector: "my-component",
  templateUrl: "my-component-tpl.html",
  animations: [
    trigger("myAnimationTrigger", [
      state(...),
      state(...),
      transition(...),
      transition(...)
    ])
  ]
})
class MyComponent {
  myStatusExp = "something";
}
    

該元件的相關範本透過在程式碼中把一個已定義的觸發器繫結到一個元素上來使用此動畫。

The template associated with this component makes use of the defined trigger by binding to an element within its template code.

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

使用行內函數

Using an inline function

transition 動畫方法也支援讀取行內函數,該函式可以決定是否應該執行相關的動畫。

The transition animation method also supports reading an inline function which can decide if its associated animation should be run.

// this method is run each time the `myAnimationTrigger` trigger value changes. function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key: string]: any}): boolean { // notice that `element` and `params` are also available here return toState == 'yes-please-animate'; } @Component({ selector: 'my-component', templateUrl: 'my-component-tpl.html', animations: [ trigger('myAnimationTrigger', [ transition(myInlineMatcherFn, [ // the animation sequence code ]), ]) ] }) class MyComponent { myStatusExp = "yes-please-animate"; }
      
      // this method is run each time the `myAnimationTrigger` trigger value changes.
function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
 string]: any}): boolean {
  // notice that `element` and `params` are also available here
  return toState == 'yes-please-animate';
}

@Component({
  selector: 'my-component',
  templateUrl: 'my-component-tpl.html',
  animations: [
    trigger('myAnimationTrigger', [
      transition(myInlineMatcherFn, [
        // the animation sequence code
      ]),
    ])
  ]
})
class MyComponent {
  myStatusExp = "yes-please-animate";
}
    

禁用動畫

Disabling Animations

當為真時,則一個特殊的動畫控制繫結 @.disabled 將會在渲染時阻止所有動畫。 把 @.disabled 繫結放在元素上可以防止觸發該元素自身的動畫,及其子元素上的所有動畫觸發器。

When true, the special animation control binding @.disabled binding prevents all animations from rendering. Place the @.disabled binding on an element to disable animations on the element itself, as well as any inner animation triggers within the element.

下面的例子展示了如何使用此特性:

The following example shows how to use this feature:

@Component({ selector: 'my-component', template: ` <div [@.disabled]="isDisabled"> <div [@childAnimation]="exp"></div> </div> `, animations: [ trigger("childAnimation", [ // ... ]) ] }) class MyComponent { isDisabled = true; exp = '...'; }
      
      @Component({
  selector: 'my-component',
  template: `
    <div [@.disabled]="isDisabled">
      <div [@childAnimation]="exp"></div>
    </div>
  `,
  animations: [
    trigger("childAnimation", [
      // ...
    ])
  ]
})
class MyComponent {
  isDisabled = true;
  exp = '...';
}
    

@.disabledtrue 時,它會阻止 @childAnimation 觸發器等任何內部動畫。

When @.disabled is true, it prevents the @childAnimation trigger from animating, along with any inner animations.

在整個應用中禁用動畫

Disable animations application-wide

當範本中的一個區域設定為禁用動畫時,其所有內部元件上的動畫也會禁用。 也就是說,只要你把 Angular 根元件上放一個 @.disabled 的宿主繫結即可。

When an area of the template is set to have animations disabled, all inner components have their animations disabled as well. This means that you can disable all animations for an app by placing a host binding set on @.disabled on the topmost Angular component.

import {Component, HostBinding} from '@angular/core'; @Component({ selector: 'app-component', templateUrl: 'app.component.html', }) class AppComponent { @HostBinding('@.disabled') public animationsDisabled = true; }
      
      import {Component, HostBinding} from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html',
})
class AppComponent {
  @HostBinding('@.disabled')
  public animationsDisabled = true;
}
    

改寫內部動畫的禁用狀態

Overriding disablement of inner animations

不管內部動畫禁用與否,父動畫總能 query() 範本裡已禁用區域中的內部元素,如果需要,也可以播放它們。 還有一種方式是當父動畫查詢到子動畫後,用 animateChild() 來播放它。

Despite inner animations being disabled, a parent animation can query() for inner elements located in disabled areas of the template and still animate them if needed. This is also the case for when a sub animation is queried by a parent and then later animated using animateChild().

檢測某個動畫何時被禁用

Detecting when an animation is disabled

如果 DOM 中的某個區域(或整個應用程式)的動畫被禁用時,動畫觸發器的回呼(Callback)仍然會觸發,但持續 0 秒。 當回呼(Callback)被觸發時,它會提供一個 AnimationEvent 的例子。如果動畫被禁用了,則該事件上的 .disabled 標誌為 true

If a region of the DOM (or the entire application) has its animations disabled, the animation trigger callbacks still fire, but for zero seconds. When the callback fires, it provides an instance of an AnimationEvent. If animations are disabled, the .disabled flag on the event is true.