title: No smooth transition of :enter and :leave Angular animations
body: <p>I'd like a smooth slide in and slide out animation using Angular animations. I am using <code>ngSwitch</code> to show/hide these components. The incoming component pushes the previous one up before it disappears out of view. I've tried adding a delay but this does not resolve the issue. </p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div class="container" [ngSwitch]="counter"&gt;
    &lt;div @slideInOut *ngSwitchCase="1"&gt;&lt;/div&gt;
    &lt;div @slideInOut *ngSwitchCase="2"&gt;&lt;/div&gt;
    &lt;div @slideInOut *ngSwitchCase="3"&gt;&lt;/div&gt;
    &lt;div @slideInOut *ngSwitchCase="4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button (click)="handleNext()"&gt;Next&lt;/button&gt;
  </code></pre>
  
  <p>app.component.scss</p>
  
  <pre><code>.container {
    div {
      width: 100px;
      height: 100px;
      background: pink;
    }
  }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { slideInOut } from './shared/animations';
  
  
  @Component({
    selector: 'my-app',
    styleUrls: ['./app.component.scss'],
    animations: [ slideInOut ],
    templateUrl: './app.component.html',
  })
  export class AppComponent {
    readonly name: string = 'Angular';
    counter = 1;
  
    boxArr = [1, 2, 3, 4]
  
    handleNext(){
      if(this.counter &lt;= this.boxArr.length){
        this.counter += 1
      } else {
        this.counter = 1
      }
    }
  }
  </code></pre>
  
  <p>animations.ts</p>
  
  <pre><code>import { trigger, state, style, transition, animate, keyframes } from "@angular/animations";
  
  
  export const slideInOut =  trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateX(100%)'}),
        animate('200ms ease-in', style({transform: 'translateX(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateX(-100%)'}))
      ])
  ])
  </code></pre>
  
  <p>demo: <a href="https://stackblitz.com/edit/angular-na1ath" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-na1ath</a></p>