javascript - Angular 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，我可能会帮助拼凑它。