• 概要
@angular/animations

stagger

function
stable

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.

@paramtimingsstring | number

A delay value.

@paramanimationAnimationMetadata | AnimationMetadata[]

One ore more animation steps.

@returnsAnimationStaggerMetadata

Usage Notes

In the following example, a container element wraps a list of items stamped out by an @for block. 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">
Jump to details