title: angular animation: component is killed before trigger animation
body: <p>I am trying to trigger an animation from the popin.component.ts that manage the view.</p>
  <pre><code>import { Component, EventEmitter, Input, Output } from &quot;@angular/core&quot;;
  import {
    trigger,
    state,
    style,
    animate,
    transition
  } from &quot;@angular/animations&quot;;
  
  @Component({
    selector: &quot;app-popin&quot;,
    templateUrl: &quot;./popin.component.html&quot;,
    styleUrls: [&quot;./popin.component.css&quot;],
    animations: [
      trigger(&quot;openClose&quot;, [
        state(
          &quot;open&quot;,
          style({
            transform: &quot;translateY(0%)&quot;
          })
        ),
        state(
          &quot;closed&quot;,
          style({
            transform: &quot;translateY(100%)&quot;
          })
        ),
        transition(&quot;* =&gt; *&quot;, animate(500))
      ])
    ]
  })
  export class PopinComponent {
    @Input() isPopinOpen = false;
    @Input() isPopinAnimationActive = false;
    @Output() isPopinClosed = new EventEmitter&lt;boolean&gt;();
  
    closePopin() {
      this.isPopinClosed.emit(this.isPopinAnimationActive);
    }
  }
  
  </code></pre>
  <p>The parent component manage the boolean to change the state.</p>
  <pre><code>import { Component } from &quot;@angular/core&quot;;
  
  @Component({
    selector: &quot;app-root&quot;,
    templateUrl: &quot;./app.component.html&quot;,
    styleUrls: [&quot;./app.component.css&quot;]
  })
  export class AppComponent {
    isPopinAnimationActive: boolean;
    isPopinOpen: boolean;
    animate() {
      this.isPopinOpen = true;
      this.isPopinAnimationActive = true;
    }
  
    closeThePopin() {
      this.isPopinOpen = false;
      this.isPopinAnimationActive = false;
    }
  }
  </code></pre>
  <p>I have 2 problems.</p>
  <p>1 - when I close the popin, the animation for sliding down does not work. It works only if I remove the line in comment.</p>
  <pre><code>  closeThePopin() {
      // this.isPopinOpen = false;
      this.isPopinAnimationActive = false;
    }
  </code></pre>
  <p>2 - It seems that angular does not read the state for transition &quot;open&quot; and &quot;closed&quot;</p>
  <pre><code>transition(&quot;open =&gt; closed&quot;, animate(500))
  </code></pre>
  <p>It works only when I use * like this:</p>
  <pre><code>transition(&quot;* =&gt; *&quot;, animate(500))
  </code></pre>
  <p>here is the codesandbox code:</p>
  <p><a href="https://codesandbox.io/s/lucid-wilson-lqzw2?file=/src/app/app.component.ts" rel="nofollow noreferrer">https://codesandbox.io/s/lucid-wilson-lqzw2?file=/src/app/app.component.ts</a></p>