如何使用Angular动画sequence（）方法仅在一次完成后触发动画？

Question

我在页面上有两个要按顺序设置动画的元素。

1. h1 tag
2. the background image

我的组件的html模板如下所示：

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

我有以下动画：

`animations: [
    trigger('flyInOut', [
      state('in', style({ transform: 'translateX(0)'})),
      transition(':enter', [
        style({
          transform: 'translateY(-3%)',
          opacity: 0,
          position: 'static'
        }),
        sequence([          
          animate(
            '3.5s ease-in-out',
            keyframes([
              style({ transform: 'translateY(50%)', opacity: 0 }),
              style({ transform: 'translateY(0%)', opacity: 1 }),
            ])
          ),
          animate('2.5s .2s ease-in', keyframes([
            style({ opacity: .0, offset: .2 }),
            style({ opacity: .2, offset: .6 }),
            style({ opacity: .4, offset: .8 }),
            style({ opacity: .99, offset: 1 })
          ]))
        ])  
      ])
    ]),`

我要做的就是运行第一个animate函数，然后运行第二个animate函数。根据角度文档，我应该能够用序列方法完成这个，但事实并非如此。

我所看到的是，给定的代码将并行执行两个动画，一旦完成第一个动画，它将触发第二个动画。

我对HTML模板中使用动画的方式有所了解。有什么建议？

Answer 1

你可以使用Animation callbacks。

只需添加你的h1标签

<h1 [@flyInOut]="isIn ? 'in' : 'out'" (@flyInOut.done)="animationDone($event)" class="welcome-title">WELCOME</h1>

而对于div使用新旗帜，例如：

<div [@flyInOut]="isDivIn ? 'in' : 'out'" class="background"> <div class="gradient">

你可以在true函数中设置为animationDone：

animationDone(event: AnimationEvent) {
    this.isDivIn = true; //or false, depends on your specific logic
}

所以，一旦h1动画完成，你的旗帜（isDivIn）将被设置为true和div动画开始。