title: Transition Animation not working in Angular 5
body: <p>I am working on an Angular 5 app which needs a slide-in/slide-out sidenav. </p>
  
  <p>Trying to use animation states to get this effect. The state css is getting applied correctly and the div moves in and out, however it is jumpy i.e. the 1500ms ease-out animation is not working. </p>
  
  <p><strong><em>Desired effect</em></strong>
  <a href="https://i.stack.imgur.com/yqiF3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yqiF3.jpg" alt="enter image description here"></a></p>
  
  <p>I've imported the BrowserAnimationsModule and added it to imports in <strong><em>app.module.ts</em></strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  </code></pre>
  
  <p><strong><em>viewer.component.html</em></strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="app-container" *ngIf="supported"&gt;
    &lt;div class="container"&gt;
      &lt;div class="main-viewport"&gt;
        &lt;app-viewer-container viewer_mode=true&gt;&lt;/app-viewer-container&gt;
      &lt;/div&gt;
      &lt;div class="side-bar-container" [@slideInOut]="sidebarState"&gt;
        &lt;div class="nav-toggle-btn"&gt;
          &lt;div class="btn" (click)="toggleMenu()"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- &lt;app-parameter-viewer globals=true&gt;&lt;/app-parameter-viewer&gt; --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>viewer.component.ts</em></strong></p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'app-viewer',
    templateUrl: './viewer.component.html',
    styleUrls: ['./viewer.component.scss'],
    animations: [
      trigger('slideInOut', [
        state('in', style({
          transform: 'translate3d(0, 0, 0)',
        })),
        state('out', style({
          transform: 'translate3d(70%, 0, 0)'
        })),
        transition('in &lt;=&gt; out', animate('1500ms ease-out'))
      ]),
    ]
  })
  export class ViewerComponent implements OnInit {
    // only relevant code added
    sidebarState:string;
  
    toggleMenu(){
      this.sidebarState = this.sidebarState  == 'out' ? 'in' : 'out';
    }
  }
  </code></pre>
  
  <p><strong><em>Things I've tried</em></strong></p>
  
  <ol>
  <li>Tried using the NoopAnimationsModule instead of the BrowserAnimationModule</li>
  <li>Tried adding 'display:block' to the side-bar-container div based on this question ()</li>
  <li>Tried adding web-animations-js </li>
  <li>Tried removing the ease-in-out animation all together and doing just animate(1500ms)</li>
  <li>Tried removing the inner child component in side-bar-container incase that's what is not animating</li>
  <li>Tried using animate(1.5s) and animate(1500) instead of 1500ms</li>
  <li>Tried shifting the toggle button outside the animated container</li>
  <li>Reinstalled @angular/animations and @angular/platform-browser</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/Bd5uu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bd5uu.png" alt="ng --version"></a></p>
  
  <p>Not sure what to do next! Any help would be really appreciated! </p>