API 参考手册
API > @angular/animations

sequence

定义一个动画步骤列表，逐个依次运行它们。

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

      
      sequence(steps: AnimationMetadata[], options: AnimationOptions = null): AnimationSequenceMetadata
参数
steps AnimationMetadata[]

一个由动画步骤对象构成的数组。

An array of animation step objects.

  • 由 style() 调用定义的步骤会立即应用样式数据。

    Steps defined by style() calls apply the styling data immediately.

  • 由 animate() 调用定义的步骤会根据时序数据中的规定，在一段时间内应用样式数据。

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

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

一个配置对象，包含一个延迟和一些由开发人员定义的参数，这些参数会提供样式的默认值，并可在调用时重写。

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

可选. 默认值是 null.

返回值

一个封装了该动画序列数据的对象。

AnimationSequenceMetadata: An object that encapsulates the sequence data.

使用说明

当你把一个步骤数组传给 transition() 调用时，这些步骤默认会顺序执行。 作为对比，group() 的调用会并行执行各个动画步骤。

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

当在 group() 或 transition() 调用中应用动画序列时， 只有当每个内部动画步骤都完成之后，才会继续执行下一个指令。

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