title: Angular 2+ Enter animation on child component works but leave does not
body: <p>i have a sub component like this </p>
  
  <pre><code>@Component({
  selector: 'is-time-controlled',
  templateUrl: './is-time-controlled.html',
  styleUrls: ['./is-time-controlled.less'],
  animations: [
      trigger(
          'myAnimation',
          [
              transition(
                  ':enter', [
                      style({ transform: 'translateX(100%)', opacity: 0 }),
                      animate('500ms', style({ transform: 'translateX(0)', 'opacity': 1 }))
                  ]
              ),
              transition(
                  ':leave', [
                      style({ transform: 'translateX(0)', opacity: 1 }),
                      animate('500ms', style({ transform: 'translateX(100%)', 'opacity': 0 }))
                  ]
              )
          ]
      )
  ]
  </code></pre>
  
  <p>})</p>
  
  <p>and the sub component has a template with first div like this</p>
  
  <pre><code>&lt;div class="card card-padding" [@myAnimation]&gt;
  </code></pre>
  
  <p>parent component has *ngIf</p>
  
  <pre><code> &lt;is-time-controlled  *ngIf="somelogic"&gt; &lt;/is-time-controlled&gt;
  </code></pre>
  
  <p>when logic is true i see enter animation but when logic becomes false i dont see leaving animation. </p>
  
  <p>i see various opened issues. do we have a fix for this? </p>