جاوااسکریپت - Angular 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() برای این API فراهم میکند. من باید با شیء انیمیشن بازی کنم تا آن را برای مثال شما کار کند، آنها پیشنهاد میکنند موارد زیر را:

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 با مثال خود راهاندازی کنید و من ممکن است بتوانم به جمعبندی آن کمک کنم.