stagger
function
Use within an animation query() call to issue a timing gap after
each queried item is animated.
API
function stagger( timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata;
stagger
Use within an animation query() call to issue a timing gap after
each queried item is animated.
@paramtimings
string | numberA delay value.
@returns
AnimationStaggerMetadataUsage 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:
Jump to details