Angular sequence()用法

[deepthan]

sequence : 序列

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

• steps : 动画序列的步骤

它可以由样式或动画函数调用组成。对style()的调用将立即应用提供的样式数据，而对animate()的调用将在它延迟时间后应用它的样式数据。

• options: 参见 AnimationOptions

// 这是一个动画序列
sequence([
  style({ opacity: 0 })),
  animate("1s", { opacity: 1 }))
])

那到底什么是序列呢？

它是一个动画列表[A,B,C]，里面的动画挨个执行：执行完A再执行B，B执行完再执行C。
它可以应用在 group 和transition里面，它只会在每个内部动画步骤完成后再继续执行下一条指令。

将一个数组作为动画数据传递到transition时，默认使用序列。如下面的[animate(500, style({...})), animate(500)]就是序列。

 animations: [trigger(
      'demo',
      [
        state('void', style({...})),
        state('*', style({...})),
        transition(
            'void => *', [animate(500, style({...})), animate(500)])
      ])],

它和组（group）的异同：

都是动画列表，序列是一个一个执行，组是并行执行。