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 docs的介绍，我应该可以使用sequence方法来做到这一点，但事实并非如此。

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

我对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动画开始。

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动画sequence（）方法仅在完成一次后触发动画？

2 个答案: