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