stagger
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
Parameters
timings
|
string | number |
A delay value. |
animation
|
AnimationMetadata | AnimationMetadata[] |
One ore more animation steps. |
Returns
AnimationStaggerMetadata
: An object that encapsulates the stagger data.
Usage notes
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: