角度6 *ngIf动画序列

Question

我的组件中有两个元素使用相同的淡入淡出动画。一次只有一个在屏幕上，它们都有*ngIf指令来控制它们的可见性。这是一个简单的淡入/淡出动画。

当我的组件状态以某种方式改变时，*ngIf条件改变，一个元素被移除，另一个元素被添加。这是我的动画：

  animations: [
    trigger('fade', [
      state('in', style({ opacity: 1, transform: 'rotateX(0deg)' })),
      transition(':enter', [style({ opacity: 0, transform: 'rotateX(90deg)' }), animate('0.2s')]),
      transition(':leave', [style({ opacity: 1, transform: 'rotateX(0deg)' }), animate('0.2s')])
    ])
  ]

下面是我的组件模板中的两个元素：

<div @fade *ngIf="isErrorState" id="error-message" class="status-message">
          <div class="message">Oops! We encountered an error while processing your signup. Please try again.</div>
        </div>
        <div @fade *ngIf="isLoadingState" id="loading-message" class="status-message">
          <div class="spinner-container">
            <app-spinner></app-spinner>
          </div>
          <div class="message">We're processing your signup, hang on...</div>
        </div>

动画是有效的，但问题是它们同时都是动画，所以它们都一起显示在屏幕上。有没有办法对动画进行排序，使一个动画在另一个动画淡出之前不会开始淡入？

Answer 1

Angular为这个API提供了一个stagger()函数。我必须使用动画对象来让它在你的例子中工作，他们提供了以下内容：

trigger('listAnimation', [
  transition('* => *', [ // each time the binding value changes
    query(':leave', [
      stagger(100, [
        animate('0.5s', style({ opacity: 0 }))
      ])
    ]),
    query(':enter', [
      style({ opacity: 0 }),
      stagger(100, [
        animate('0.5s', style({ opacity: 1 }))
      ])
    ])
  ])
])

用你的例子做一个stackblitz，我可能会帮你把它拼凑起来。