fix(sidenav): fix animation issue for initially open sidenav (#3045)

* fix animation issue for initially open sidenav

* rename

* add import for rxjs first operator

Author: mmalerba

src/lib/sidenav/sidenav-transitions.scss

@@ -1,18 +1,20 @@
 // Separate transitions to be able to disable them in unit tests by omitting this file.
 @import '../core/style/variables';
 
-.mat-sidenav {
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
-}
+.mat-sidenav-transition {
+  .mat-sidenav {
+    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+  }
 
-.mat-sidenav-content {
-  transition: {
-    duration: $swift-ease-out-duration;
-    timing-function: $swift-ease-out-timing-function;
-    property: transform, margin-left, margin-right;
+  .mat-sidenav-content {
+    transition: {
+      duration: $swift-ease-out-duration;
+      timing-function: $swift-ease-out-timing-function;
+      property: transform, margin-left, margin-right;
+    }
   }
-}
 
-.mat-sidenav-backdrop.mat-sidenav-shown {
-  transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
+  .mat-sidenav-backdrop.mat-sidenav-shown {
+    transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
+  }
 }

src/lib/sidenav/sidenav.ts

@@ -13,14 +13,16 @@ import {
   EventEmitter,
   Renderer,
   ViewEncapsulation,
-  ViewChild
+  ViewChild,
+  NgZone
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Dir, MdError, coerceBooleanProperty, CompatibilityModule} from '../core';
 import {A11yModule} from '../core/a11y/index';
 import {FocusTrap} from '../core/a11y/focus-trap';
 import {ESCAPE} from '../core/keyboard/keycodes';
 import {OverlayModule} from '../core/overlay/overlay-directives';
+import 'rxjs/add/operator/first';
 
 
 /** Exception thrown when two MdSidenav are matching the same side. */
@@ -321,6 +323,7 @@ export class MdSidenav implements AfterContentInit {
   ],
   host: {
     '[class.mat-sidenav-container]': 'true',
+    '[class.mat-sidenav-transition]': '_enableTransitions',
   },
   encapsulation: ViewEncapsulation.None,
 })
@@ -349,8 +352,11 @@ export class MdSidenavContainer implements AfterContentInit {
   private _left: MdSidenav;
   private _right: MdSidenav;
 
+  /** Whether to enable open/close trantions. */
+  _enableTransitions = false;
+
   constructor(@Optional() private _dir: Dir, private _element: ElementRef,
-              private _renderer: Renderer) {
+              private _renderer: Renderer, private _ngZone: NgZone) {
     // If a `Dir` directive exists up the tree, listen direction changes and update the left/right
     // properties to point to the proper start/end.
     if (_dir != null) {
@@ -366,6 +372,9 @@ export class MdSidenavContainer implements AfterContentInit {
       this._watchSidenavAlign(sidenav);
     });
     this._validateDrawers();
+
+    // Give the view a chance to render the initial state, then enable transitions.
+    this._ngZone.onMicrotaskEmpty.first().subscribe(() => this._enableTransitions = true);
   }
 
   /**