模板语法
服务端渲染
API / @angular/animations

stagger

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

在调用 query() 中使用可以在每个查询到的条目开始播放动画之后插入一个时间间隔。

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

参数

timings

A delay value.

延迟值。

animation

One ore more animation steps.

一个或多个动画步骤。

返回值

AnimationStaggerMetadata: An object that encapsulates the stagger data.

一个封装了交错数据的对象。

使用说明

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.

在下面的例子中，容器元素包含一个由 ngFor 标记的列表。 该容器包含一个动画触发器，用于稍后查询每个内部条目。

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 })) ]) ]) ]) ])