Angular 6 *ngIf 动画排序答案

【问题标题】：Angular 6 *ngIf animation sequencingAngular 6 *ngIf 动画排序
【发布时间】：2018-12-03 00:50:31
【问题描述】：

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

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

【问题讨论】：

标签： javascript angular typescript

【解决方案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 }))
      ])
    ])
  ])
])

用你的例子启动一个堆栈闪电战，我可能会帮助把它拼凑起来。

【讨论】：