fix: avoid initial animation

Author: crisbeto

src/lib/sidenav/sidenav.ts

@@ -60,19 +60,20 @@ export class MdSidenavToggleResult {
   encapsulation: ViewEncapsulation.None,
   animations: [
     trigger('transform', [
-      state('open', style({
+      state('open, initial-open', style({
         transform: 'translate3d(0, 0, 0)',
         visibility: 'visible',
       })),
       state('void', style({
         visibility: 'hidden',
       })),
-      transition('* => *', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
+      transition('void => initial-open', animate('0ms')),
+      transition('void <=> open', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
     ])
   ],
   host: {
     'class': 'mat-sidenav',
-    '[@transform]': 'opened ? "open" : "void"',
+    '[@transform]': '_getAnimationState()',
     '(@transform.start)': '_isAnimating = true',
     '(@transform.done)': '_onAnimationEnd($event)',
     '(keydown)': 'handleKeydown($event)',
@@ -89,6 +90,9 @@ export class MdSidenav implements AfterContentInit, OnDestroy {
   private _focusTrap: FocusTrap;
   private _elementFocusedBeforeSidenavWasOpened: HTMLElement | null = null;
 
+  /** Whether the sidenav is initialized. Used for disabling the initial animation. */
+  private _isInitialized = false;
+
   /** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */
   private _align: 'start' | 'end' = 'start';
 
@@ -176,6 +180,7 @@ export class MdSidenav implements AfterContentInit, OnDestroy {
   ngAfterContentInit() {
     this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
     this._focusTrap.enabled = this.isFocusTrapEnabled;
+    Promise.resolve().then(() => this._isInitialized = true);
   }
 
   ngOnDestroy() {
@@ -237,6 +242,17 @@ export class MdSidenav implements AfterContentInit, OnDestroy {
     }
   }
 
+  /**
+   * Figures out the state of the sidenav animation.
+   */
+  _getAnimationState(): 'initial-open' | 'open' | 'void' {
+    if (this.opened) {
+      return this._isInitialized ? 'open' : 'initial-open';
+    }
+
+    return 'void';
+  }
+
   _onAnimationEnd(event: AnimationEvent) {
     if (event.toState === 'open') {
       this.onOpen.emit(new MdSidenavToggleResult('open', true));