title: No animation during resizing Angular Material2 sidenav
body: <ul>
  <li>Have a <code>mat-sidenav</code> (<code>opened="true"</code>) with <code>mat-nav-list</code></li>
  <li>Each <code>mat-list-item</code> has a <code>mat-icon</code> and a <code>span</code>   </li>
  <li><code>mat-sidenav-container</code> has <code>autosize</code> directive</li>
  </ul>
  
  <p>But there is <strong>no animation during resizing</strong> (collapse/expand) of <code>mat-sidenav</code>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;mat-sidenav-container class="example-container" autosize&gt;
    &lt;mat-sidenav mode="side" [opened]="true" #sidenav&gt;
      &lt;mat-nav-list&gt;
        &lt;mat-list-item (click)="isExpanded=!isExpanded"&gt;
          &lt;mat-icon matListIcon&gt;reorder&lt;/mat-icon&gt;
        &lt;/mat-list-item&gt;
        &lt;mat-list-item&gt;
          &lt;mat-icon matListIcon&gt;home&lt;/mat-icon&gt;
          &lt;span *ngIf="isExpanded"&gt;Home&lt;/span&gt;
        &lt;/mat-list-item&gt;
        &lt;mat-list-item&gt;
          &lt;mat-icon matListIcon&gt;person&lt;/mat-icon&gt;
          &lt;span *ngIf="isExpanded"&gt;Athlets&lt;/span&gt;
        &lt;/mat-list-item&gt;
        &lt;mat-list-item&gt;
          &lt;mat-icon matListIcon&gt;group&lt;/mat-icon&gt;
          &lt;span *ngIf="isExpanded"&gt;Teams &amp; Partnerships&lt;/span&gt;
        &lt;/mat-list-item&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
      &lt;h3&gt;Dashboard&lt;/h3&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.example-container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .mat-sidenav {
      background-color:#3a3636;
    }
    .mat-list-item {      
      color: #faf6f6;
    }
    .mat-list-item:hover {      
      color: #3a3636;
      background-color:#faf6f6;
    }
  </code></pre>
  
  <p><strong>TS</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    isExpanded = true;
  }
  </code></pre>
  
  <p><strong>If there is no inbuilt implementation for this in Angular Material2, how can I achieve the animation?</strong></p>