title: Angular 6 *ngIf animation sequencing
body: <p>I have two elements in my component that use the same fade animation. Only one is on screen at a time, they both have *ngIf directives to control their visibility. It's a simple fade in/fade out animation. </p>
  
  <p>When my component state changes a certain way, the *ngIf conditions change and one element is removed and the other is added. Here is my animation:</p>
  
  <pre><code>  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')])
      ])
    ]
  </code></pre>
  
  <p>And here are my two elements in my component template:</p>
  
  <pre><code>&lt;div @fade *ngIf="isErrorState" id="error-message" class="status-message"&gt;
            &lt;div class="message"&gt;Oops! We encountered an error while processing your signup. Please try again.&lt;/div&gt;
          &lt;/div&gt;
          &lt;div @fade *ngIf="isLoadingState" id="loading-message" class="status-message"&gt;
            &lt;div class="spinner-container"&gt;
              &lt;app-spinner&gt;&lt;/app-spinner&gt;
            &lt;/div&gt;
            &lt;div class="message"&gt;We're processing your signup, hang on...&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The animation works, but the problem is they are both animating at the same time, so they are both shown on screen together. Is there a way to sequence the animations so one doesn't start to fade in until the other is done fading out?</p>