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

stagger

在呼叫 query() 中使用可以在每個查詢到的條目開始播放動畫之後插入一個時間間隔。

Use within an animation query() call to issue a timing gap after each queried item is animated.

      
      stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata
    
引數
timings string | number

延遲值。

A delay value.

animation AnimationMetadata | AnimationMetadata[]

一個或多個動畫步驟。

One ore more animation steps.

返回值

一個封裝了交錯資料的物件。

AnimationStaggerMetadata: An object that encapsulates the stagger data.

使用說明

在下面的例子中,容器元素包含一個由 ngFor 標記的列表。 該容器包含一個動畫觸發器,用於稍後查詢每個內部條目。

In the following example, a container element wraps a list of items stamped out by an ngFor. The container element contains an animation trigger that will later be set to query for each of the inner items.

每當新增條目後,就會執行一個透明度淡入動畫,移除時則淡出。 無論發生了哪個動畫,都會在每個條目的動畫開始之後,執行交錯器的效果。

Each time items are added, the opacity fade-in animation runs, and each removed item is faded out. When either of these animations occur, the stagger effect is applied after each item's animation is started.

      
      <!-- list.component.html -->
<button (click)="toggle()">Show / Hide Items</button>
<hr />
<div [@listAnimation]="items.length">
  <div *ngFor="let item of items">
    {{ item }}
  </div>
</div>
    

下面是元件程式碼:

Here is the component code:

      
      import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
@Component({
  templateUrl: 'list.component.html',
  animations: [
    trigger('listAnimation', [
    ...
    ])
  ]
})
class ListComponent {
  items = [];

  showItems() {
    this.items = [0,1,2,3,4];
  }

  hideItems() {
    this.items = [];
  }

  toggle() {
    this.items.length ? this.hideItems() : this.showItems();
   }
 }
    

下面是動畫交錯器程式碼:

Here is the animation trigger code:

      
      trigger('listAnimation', [
  transition('* => *', [ // each time the binding value changes
    query(':leave', [
      stagger(100, [
        animate('0.5s', style({ opacity: 0 }))
      ])
    ]),
    query(':enter', [
      style({ opacity: 0 }),
      stagger(100, [
        animate('0.5s', style({ opacity: 1 }))
      ])
    ])
  ])
])