如何使用 Angular animations 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 })
          ]))
        ])  
      ])
    ]),`

我只想运行第一个动画函数，然后运行第二个动画函数。根据 angular 文档，我应该可以使用序列方法完成此操作，但事实并非如此。

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

我有一种感觉，这与我在 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">

您可以在 animationDone 函数中将其设置为 true：

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

因此，一旦 h1 动画完成，您的标志 (isDivIn) 将设置为 true 并且 div 动画开始。

Answer 2

您需要查询您的元素，然后应用序列。像这样：

@Component({
  host: {'[@flyInOut]': ''}
  animations: [
    trigger('flyInOut', [
      query('.container', '.background', [
        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 })]))
        ])
      ])
    ])
  ]
})

如何使用 Angular animations sequence() 方法只在一个完成后触发动画？

How to use Angular animations sequence() method to trigger animation only after one finishes?

angular

angular-animations