title: Add animation when switching tabs
body: <p>I am working with some tabs. Is there a way to add an animation (slide left / right) when I switch tabs?</p>
  
  <p><a href="https://stackblitz.com/edit/switch-tabs?file=app%2Fapp.component.html" rel="nofollow noreferrer">DEMO</a></p>
  
  <p><strong>code</strong></p>
  
  <pre><code>  viewMode = 'tab1';
  
  
  &lt;div class="container"&gt;
      &lt;div class="tab-slider--nav"&gt;
        &lt;ul class="tab-slider--tabs"&gt;
          &lt;li class="tab-slider--trigger" [class.active]="viewMode == 'tab1'" rel="tab1" (click)="viewMode ='tab1'"&gt;Tab 1&lt;/li&gt;
          &lt;li class="tab-slider--trigger" [class.active]="viewMode == 'tab2'" rel="tab2" (click)="viewMode ='tab2'"&gt;Tab 2&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="tab-slider--container" [ngSwitch]="viewMode"&gt;
        &lt;div id="tab1" class="tab-slider--body" *ngSwitchCase="'tab1'"&gt;
          &lt;h2&gt;First Tab&lt;/h2&gt;
          &lt;p&gt;Toggle switch style tab navigation. Currently only works with two tabs.&lt;/p&gt;
          &lt;p&gt;asdasd.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="tab2" class="tab-slider--body" *ngSwitchCase="'tab2'"&gt;
          &lt;h2&gt;Second Tab&lt;/h2&gt;
          &lt;p&gt;asdad&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>