如何使用Angular animations的sequence()方法实现动画顺序触发？

首先，我们来拆解你遇到的两个核心问题：单个元素内的sequence动画未按预期顺序执行，以及两个页面元素（h1和背景图）需要依次触发动画。

一、修复单个元素内的sequence动画顺序问题 #

你当前的代码里，第二个animate添加了.2s的延迟，这会导致它和第一个动画出现并行执行的错觉（虽然第一个动画时长3.5s，延迟0.2s看起来影响不大，但这违背了sequence的设计初衷）。sequence的作用就是让内部的动画步骤严格按顺序执行，前一个完成后立即启动下一个，所以你需要去掉第二个动画的延迟参数：

animations: [
  trigger('flyInOut', [
    state('in', style({ transform: 'translateX(0)'})),
    transition(':enter', [
      style({ transform: 'translateY(-3%)', opacity: 0, position: 'static' }),
      sequence([
        // 第一个动画：3.5s完成位移和初始显隐
        animate( '3.5s ease-in-out', keyframes([
          style({ transform: 'translateY(50%)', opacity: 0 }),
          style({ transform: 'translateY(0%)', opacity: 1 }),
        ]) ),
        // 去掉.2s延迟，让sequence自动在前一个动画完成后执行
        animate('2.5s ease-in', keyframes([
          style({ opacity: .0, offset: .2 }),
          style({ opacity: .2, offset: .6 }),
          style({ opacity: .4, offset: .8 }),
          style({ opacity: .99, offset: 1 })
        ]))
      ])
    ])
  ])
],

这样修改后，单个元素内的两个动画步骤就会严格按顺序执行：先完成3.5s的位移动画，再启动2.5s的透明度渐变动画。

二、实现h1与背景图的顺序动画执行 #

你当前给两个元素都绑定了同一个[@flyInOut]="isIn ? 'in' : 'out'"，所以它们会同时触发动画。要实现先h1、后背景图的顺序效果，推荐两种方案：

方案1：利用动画完成回调（简单直观） #

给h1标签添加动画完成的回调事件，当h1的动画结束后，再触发背景图的动画：

1. 修改组件HTML模板：

<div class="container">
  <!-- 添加动画完成回调 -->
  <h1 [@flyInOut]="isH1In ? 'in' : 'out'" (@flyInOut.done)="onH1AnimationEnd()" class="welcome-title">WELCOME</h1>
</div>
<!-- 背景图绑定独立的状态变量 -->
<div [@flyInOut]="isBackgroundIn ? 'in' : 'out'" class="background">
  <div class="gradient">
    <div class="container">
      <div style="height: 350px;"></div>
    </div>
  </div>
</div>

2. 在组件类中添加状态变量和回调方法：

isH1In = false;
isBackgroundIn = false;

ngOnInit() {
  // 初始化时先启动h1的动画
  this.isH1In = true;
}

onH1AnimationEnd() {
  // h1动画完成后，启动背景图的动画
  this.isBackgroundIn = true;
}

方案2：用父容器的动画序列控制子元素（更优雅的动画编排） #

如果希望用Angular的动画系统统一编排，可以把两个元素放到同一个父容器中，给父容器添加trigger，通过query来依次触发子元素的动画：

1. 修改HTML模板，添加父容器：

<div [@pageAnimation]="isPageIn ? 'in' : 'out'">
  <div class="container">
    <h1 class="welcome-title">WELCOME</h1>
  </div>
  <div class="background">
    <div class="gradient">
      <div class="container">
        <div style="height: 350px;"></div>
      </div>
    </div>
  </div>
</div>

2. 重新编写动画代码：

animations: [
  trigger('pageAnimation', [
    state('in', style({ opacity: 1 })),
    transition(':enter', [
      style({ opacity: 0 }),
      sequence([
        // 先执行h1的动画
        query('.welcome-title', [
          style({ transform: 'translateY(-3%)', opacity: 0 }),
          animate('3.5s ease-in-out', keyframes([
            style({ transform: 'translateY(50%)', opacity: 0 }),
            style({ transform: 'translateY(0%)', opacity: 1 }),
          ])),
          animate('2.5s ease-in', keyframes([
            style({ opacity: .0, offset: .2 }),
            style({ opacity: .2, offset: .6 }),
            style({ opacity: .4, offset: .8 }),
            style({ opacity: .99, offset: 1 })
          ]))
        ]),
        // h1动画完成后，执行背景图的动画
        query('.background', [
          style({ transform: 'translateY(-3%)', opacity: 0 }),
          animate('3.5s ease-in-out', keyframes([
            style({ transform: 'translateY(50%)', opacity: 0 }),
            style({ transform: 'translateY(0%)', opacity: 1 }),
          ])),
          animate('2.5s ease-in', keyframes([
            style({ opacity: .0, offset: .2 }),
            style({ opacity: .2, offset: .6 }),
            style({ opacity: .4, offset: .8 }),
            style({ opacity: .99, offset: 1 })
          ]))
        ])
      ])
    ])
  ])
],

3. 组件类中只需控制父容器的状态：

isPageIn = false;

ngOnInit() {
  this.isPageIn = true;
}

总结 #

• 单个元素内的sequence不生效，是因为你给第二个动画添加了不必要的延迟，去掉后就能严格按顺序执行；
• 多个元素的顺序动画，推荐用动画完成回调的方案，实现简单且易于维护；如果需要更复杂的动画编排，再考虑父容器的query+sequence方案。

内容的提问来源于stack exchange，提问作者O.MeeKoh