feat(aio): don't animate sidenav on launch.

aio/src/app/app.component.html

@@ -10,7 +10,7 @@
 </md-toolbar>
 
 <a id="top-of-page"></a>
-<md-sidenav-container class="sidenav-container" role="main">
+<md-sidenav-container class="sidenav-container" [class.starting]="isStarting" role="main">
 
   <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode">
     <aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu>

aio/src/app/app.component.ts

@@ -25,6 +25,7 @@ export class AppComponent implements OnInit {
   pageId: string;
   currentDocument: DocumentContents;
   footerNodes: NavigationNode[];
+  isStarting = true;
   isSideBySide = false;
   private isSideNavDoc = false;
   private previousNavView: string;
@@ -105,9 +106,9 @@ export class AppComponent implements OnInit {
   }
 
   onDocRendered() {
-    // This handler is needed because the subscription to the `currentUrl` in `ngOnInit`
-    // gets triggered too early before the doc-viewer has finished rendering the doc
+    // Scroll after the doc-viewer has finished rendering the new doc
     this.autoScroll();
+    this.isStarting = false;
   }
 
   @HostListener('window:resize', ['$event.target.innerWidth'])

aio/src/styles/1-layouts/_sidenav.scss

@@ -1,3 +1,14 @@
+
+// Disable sidenav animations while starting the app
+// See https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav-transitions.scss
+.starting.mat-sidenav-transition {
+  .mat-sidenav,
+  .mat-sidenav-content,
+  .mat-sidenav-backdrop.mat-sidenav-shown {
+    transition: none;
+  }
+}
+
 aio-nav-menu.top-menu .vertical-menu-item  {
   background-color: $lightgray;
   text-transform: uppercase;
@@ -163,4 +174,4 @@ aio-nav-menu.top-menu {
     border-bottom: 2px solid rgba($mediumgray, 0.5);
   }
 
-}
+}