function
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.
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 })) ]) ]) ]) ])
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/animations/stagger