title: Angular 7 animations - Transition not working
body: <p>I looked at other questions around the same issue and none of the solutions provided worked for me.</p>
  
  <p>I'm using Angular 7.2 with "@angular/animations": "~7.2.0".</p>
  
  <p>I have a div which I want to fade in and fade out. So I have applied an opacity animation to it. This same div, I use <code>*ngIf</code> to add it and remove it from HTML. </p>
  
  <p>The problem is, the animation styles (opacity) is getting applied correctly but it's not transitioning nicely from opacity 1 > 0 or 0 > 1.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div *ngIf="divToShow.value !== 'none'" [@openClose]="openState"&gt;Dynamic Content Here&lt;/div&gt;
  </code></pre>
  
  <p>Animation:</p>
  
  <pre><code>animations: [
      trigger('openClose', [
        state('true', style({
          opacity: '1'
        })),
        state('false', style({
          opacity: '0'
        })),
        transition('true =&gt; false', [
          animate('10s')
        ]),
        transition('false =&gt; true', [
          animate('10s')
        ]),
      ]),
    ],
  </code></pre>
  
  <p>Getter:</p>
  
  <pre><code>public get openState(): string {
      if (this.divToShow.value !== 'none') {
        return 'true';
      } else {
        return 'false';
      }
    }
  </code></pre>
  
  <p><code>divToShow</code> will be 'none' when no div is to be shown. When it does need to show a div it will have the div name as a string.</p>
  
  <p>Can you please advice what I'm doing wrong here? </p>