title: Angular animation not triggering
body: <p>I am trying to achieve a simple animation with angular. On the click of the button I change the state of <code>showState</code> from to <code>shown</code>. Since I am using *ngIf I have used <code>void</code> keyword in the animation and yet it is not working. </p>
  
  <p><a href="https://stackblitz.com/edit/angular-shrfbe" rel="nofollow noreferrer">STACKBLITZ</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>p {
    border: 1px solid black;
    background-color: lightblue;
    padding: 10px;
  }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { showStateTrigger } from './animations';
  import { Component } from "@angular/core";
  
  @Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
    animations: [
      showStateTrigger
    ]
  })
  export class AppComponent {
    isShown = false;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button (click)="isShown = !isShown"&gt;Toggle Element&lt;/button&gt;
  &lt;p [@showState]="isShown ? 'shown' : 'notShown'" *ngIf="isShown"&gt; You can see me now!&lt;/p&gt;
  </code></pre>
  
  <p><strong>Animations.ts</strong></p>
  
  <p>import { state, style, transition, trigger, animate } from "@angular/animations";</p>
  
  <p>export const showStateTrigger = trigger("showState", [</p>
  
  <pre><code>  transition('void =&gt; shown', [
      style({
        opacity: 0
      }),
      animate(2000, style({
        opacity: 1
      }))
    ])
  
  ]);
  </code></pre>