title: Angular animations *ngIf + opacity only works in one direction
body: <p>I'm having an issue with fading in and out an error message while also using *ngIf. The fade-in works fine, but the fade out does not work. Instead, the text just disappears (as if set to display:none), even though the *ngIf does not take effect until the fade out is complete. I have tried converting to use string enumerations and numeric values but get the same effect. Is there an issue with my animations configuration?</p>
  <p>Linked stackblitz is using Angular 10, I'm on Angular 11.0.7 (latest).</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-bsuupd?file=src/app/form-error.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-bsuupd?file=src/app/form-error.component.ts</a></p>
  <pre><code>@Component({
    selector: &quot;app-form-error&quot;,
    animations: [
      trigger(&quot;fadeInOut&quot;, [
        state(&quot;false&quot;, style({ opacity: 0 })),
        state(&quot;true&quot;, style({ opacity: 1 })),
        transition(&quot;true &lt;=&gt; false&quot;, animate(500))
      ])
    ],
    template: `
      &lt;p&gt;showError is {{ showError }}&lt;/p&gt;
      &lt;p&gt;fadeError is {{ fadeError }}&lt;/p&gt;
      &lt;ng-container *ngIf=&quot;showError&quot;&gt;
        &lt;h1 [@fadeInOut]=&quot;{ value: fadeError }&quot;&gt;{{ errorText }}&lt;/h1&gt;
      &lt;/ng-container&gt;
    `
  })
  export class FormErrorComponent implements OnInit, OnChanges {
    @Input() errorText: string;
    showError: boolean = false;
    fadeError: boolean = false;
  
    constructor() {}
  
    ngOnInit(): void {}
  
    ngOnChanges(changes: SimpleChanges): void {
      if (this.errorText) {
        this.showError = true;
        setTimeout(() =&gt; {
          // lets fade in begin after ngIf takes effect (works fine)
          this.fadeError = true;
        });
      } else {
        this.fadeError = false; // this should start fade, but just hides the text immediately
        setTimeout(() =&gt; {
          // delays the ngIf until fade out is done
          this.showError = false;
        }, 500);
      }
    }
  }
  </code></pre>