模板语法
服务端渲染
API / @angular/animations

sequence

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

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

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

参数

steps

An array of animation step objects.

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

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

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

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

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

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

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.

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

使用说明

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.

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

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.

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