@angular/animations

sequence

function

Defines a list of animation steps to be run sequentially, one by one.

sequence(
  steps: AnimationMetadata[],
  options?: AnimationOptions
): AnimationSequenceMetadata;

When you pass an array of steps to a transition() call, the steps run sequentially by default. Compare this to the {@link animations/group group()} call, which runs animation steps in parallel.

When a sequence is used within a {@link animations/group group()} or a transition() call, execution continues to the next instruction only after each of the inner animation steps have completed.

sequence

AnimationSequenceMetadata

Defines a list of animation steps to be run sequentially, one by one.

@paramstepsAnimationMetadata[]

An array of animation step objects.

Steps defined by style() calls apply the styling data immediately.
Steps defined by animate() calls apply the styling data over time as specified by the timing data.

          
            sequence([style({ opacity: 0 }),animate("1s", style({ opacity: 1 }))])

@paramoptionsAnimationOptions

An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation.

@returnsAnimationSequenceMetadata

Usage notes

When you pass an array of steps to a transition() call, the steps run sequentially by default. Compare this to the {@link animations/group group()} call, which runs animation steps in parallel.

When a sequence is used within a {@link animations/group group()} or a transition() call, execution continues to the next instruction only after each of the inner animation steps have completed.