title: Incorrectly work animation of the appearance the sidebar
body: <p>Tell me what I'm doing wrong. I'm trying to implement the animation of the appearance of the sidebar, but by clicking on the button, the panel appears instantly, when pressed again, it waits for 2 seconds and instantly disappears. How to do it smoothly?</p>
  
  <p>My TypeScript:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component, OnInit} from '@angular/core';
  import {animate, transition, trigger} from '@angular/animations';
  
  @Component({
    selector: 'app-navigation-bar',
    templateUrl: './navigation-bar.component.html',
    styleUrls: ['./navigation-bar.component.css'],
    animations: [
      trigger('showPanel', [
        transition('void &lt;=&gt; *', [
          animate(2000)
        ])
      ])
    ]
  })
  export class NavigationBarComponent implements OnInit {
    isShow = false;
  
    constructor() {
    }
  
    ngOnInit() {
    }
  
    onShowPanel() {
      this.isShow = !this.isShow;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="time-panel"&gt;
    &lt;div class="content" *ngIf='isShow' @showPanel&gt;&lt;/div&gt;
    &lt;!--Visible button--&gt;
    &lt;div class="time-button" 
         title="Панель навигации по архиву" 
         (click)="onShowPanel()"&gt;
      &lt;i class="material-icons"&gt;gamepad&lt;/i&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>css</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.time-panel {
    position: fixed;
    top: 177px;
    right: 0;
    z-index: 100;
  }
  
  .time-panel .content {
    /*position: relative;*/
    width: 250px;
    height: 335px;
    padding: 15px;
    border: 1px solid #0062cc;
    background: #ffffff;
  }
  
  .time-panel .time-button {
    position: absolute;
    right: 100%;
    top: 0;
    background: #0062cc;
    border-bottom-left-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
    cursor: pointer;
  }
  
  .time-panel .time-button i {
    color: white;
    padding: 5px;
    font-size: 32px;
  }
  
  .btn-control {
    width: 100%;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>If the button is outside the sidebar, the animation works, but I want the button moves with the sidebar.</p>
  
  <p>What are the suggestions for solving this problem?</p>