Javascript 角度6*ngIf动画排序

我的组件中有两个元素使用相同的淡入淡出动画。一次只有一个在屏幕上，它们都有*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>

哎呀！我们在处理您的注册时遇到错误。请再试一次。
我们正在处理你的注册，等等。。。

---

动画可以工作，但问题是它们都在同时制作动画，所以它们都显示在屏幕上。是否有办法对动画进行排序，以便在另一个动画淡出之前，其中一个动画不会开始淡入？

Angular为此提供了一个

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，我可能会帮你把它拼凑起来