title: angular 6 animation *ngIf, transition not work
body: <p>The project presents two variants of animation.</p>
  
  <p><em>Animation Option 1, trigger('animationOption1')</em><br>
  Works without complaints.</p>
  
  <p><em>Animation Option 2, trigger('animationOption2')</em><br>
  <strong>transition doesn't work here.</strong></p>
  
  <p><a href="https://stackblitz.com/github/MyTempGitForCommunity/angular-6-animation-transition" rel="noreferrer">Online check this project in StackBlitz.com</a></p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;h1&gt;Animation Option 1&lt;/h1&gt;
  &lt;div (click)="changeDivState()"
       [@animationOption1]="clickedDivState"
  &gt;Click Me
  &lt;/div&gt;
  
  &lt;h1&gt;Animation Option 2&lt;/h1&gt;
  &lt;button (click)="toggleMenu()"&gt;Click Me&lt;/button&gt;
  &lt;ul *ngIf="isMenuOpen"
      [@animationOption2]="isMenuOpen ? 'open': 'close'"
  &gt;
    &lt;li&gt;Menu Item 1&lt;/li&gt;
    &lt;li&gt;Menu Item 2&lt;/li&gt;
    &lt;li&gt;Menu Item 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [
      trigger('animationOption1', [
        state('start', style({
          backgroundColor: 'yellow',
          width: '150px',
          height: '150px'
        })),
        state('end', style({
          backgroundColor: 'green',
          width: '300px',
          height: '300px'
        })),
        transition('start =&gt; end', animate(1500)),
        transition('end =&gt; start', animate('800ms 0.5s ease-out'))
      ]),
      trigger('animationOption2', [
        state('close', style({
          opacity: 0,
          backgroundColor: 'yellow'
        })),
        state('open', style({
          opacity: 1,
          backgroundColor: 'green'
        })),
        transition('close &lt;=&gt; open', animate(3000)),
      ])
    ]
  })
  export class AppComponent {
    isMenuOpen = false;
  
    clickedDivState = 'start';
  
    changeDivState() {
      this.clickedDivState = 'end';
      setTimeout(() =&gt; {
        this.clickedDivState = 'start';
      }, 3000);
    }
  
    toggleMenu(): void {
      this.isMenuOpen = !this.isMenuOpen;
    }
  }
  </code></pre>
  
  <p>Googling did not lead to a solution.</p>