fix(drawer): drawer container animating when open by default

* Prevents the drawer container from animating if it's open on load.
* Fixes `_updateStyles` being called twice in a row on init, because the first animations are `void->void` and `void->open-instant`.

Fixes #7007.

Author: crisbeto

src/lib/sidenav/drawer.spec.ts

@@ -314,7 +314,7 @@ describe('MdDrawerContainer', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdSidenavModule, A11yModule, PlatformModule, NoopAnimationsModule],
-      declarations: [DrawerContainerTwoDrawerTestApp, DrawerDelayed],
+      declarations: [DrawerContainerTwoDrawerTestApp, DrawerDelayed, DrawerSetToOpenedTrue],
     });
 
     TestBed.compileComponents();
@@ -363,6 +363,18 @@ describe('MdDrawerContainer', () => {
 
     expect(parseInt(contentElement.style.marginLeft)).toBeGreaterThan(0);
   }));
+
+  it('should not animate when the sidenav is open on load ', fakeAsync(() => {
+    const fixture = TestBed.createComponent(DrawerSetToOpenedTrue);
+
+    fixture.detectChanges();
+    tick();
+
+    const container = fixture.debugElement.nativeElement.querySelector('.mat-drawer-container');
+
+    expect(container.classList).not.toContain('mat-drawer-transition');
+  }));
+
 });
 
 

src/lib/sidenav/drawer.ts

@@ -33,11 +33,9 @@ import {
 } from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
 import {merge} from 'rxjs/observable/merge';
-import {first} from 'rxjs/operator/first';
-import {startWith} from 'rxjs/operator/startWith';
-import {takeUntil} from 'rxjs/operator/takeUntil';
 import {Subject} from 'rxjs/Subject';
 import {Subscription} from 'rxjs/Subscription';
+import {RxChain, filter, first, startWith, takeUntil} from '@angular/cdk/rxjs';
 
 
 /** Throws an exception when two MdDrawer are matching the same position. */
@@ -118,7 +116,7 @@ export class MdDrawerContent implements AfterContentInit {
   host: {
     'class': 'mat-drawer',
     '[@transform]': '_animationState',
-    '(@transform.start)': '_onAnimationStart()',
+    '(@transform.start)': '_onAnimationStart($event)',
     '(@transform.done)': '_onAnimationEnd($event)',
     '(keydown)': 'handleKeydown($event)',
     // must prevent the browser from aligning text based on value
@@ -178,7 +176,7 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
   private _opened: boolean = false;
 
   /** Emits whenever the drawer has started animating. */
-  _animationStarted = new EventEmitter<void>();
+  _animationStarted = new EventEmitter<AnimationEvent>();
 
   /** Whether the drawer is animating. Used to prevent overlapping animations. */
   _isAnimating = false;
@@ -321,9 +319,9 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
     }
   }
 
-  _onAnimationStart() {
+  _onAnimationStart(event: AnimationEvent) {
     this._isAnimating = true;
-    this._animationStarted.emit();
+    this._animationStarted.emit(event);
   }
 
   _onAnimationEnd(event: AnimationEvent) {
@@ -444,13 +442,19 @@ export class MdDrawerContainer implements AfterContentInit, OnDestroy {
    * is properly hidden.
    */
   private _watchDrawerToggle(drawer: MdDrawer): void {
-    takeUntil.call(drawer._animationStarted, this._drawers.changes).subscribe(() => {
-      // Set the transition class on the container so that the animations occur. This should not
-      // be set initially because animations should only be triggered via a change in state.
-      this._renderer.addClass(this._element.nativeElement, 'mat-drawer-transition');
-      this._updateContentMargins();
-      this._changeDetectorRef.markForCheck();
-    });
+    RxChain.from(drawer._animationStarted)
+      .call(takeUntil, this._drawers.changes)
+      .call(filter, (event: AnimationEvent) => event.fromState !== event.toState)
+      .subscribe((event: AnimationEvent) => {
+        // Set the transition class on the container so that the animations occur. This should not
+        // be set initially because animations should only be triggered via a change in state.
+        if (event.toState !== 'open-instant') {
+          this._renderer.addClass(this._element.nativeElement, 'mat-drawer-transition');
+        }
+
+        this._updateContentMargins();
+        this._changeDetectorRef.markForCheck();
+      });
 
     if (drawer.mode !== 'side') {
       takeUntil.call(merge(drawer.onOpen, drawer.onClose), this._drawers.changes).subscribe(() =>
@@ -459,8 +463,8 @@ export class MdDrawerContainer implements AfterContentInit, OnDestroy {
   }
 
   /**
-   * Subscribes to drawer onPositionChanged event in order to re-validate drawers when the position
-   * changes.
+   * Subscribes to drawer onPositionChanged event in order to
+   * re-validate drawers when the position changes.
    */
   private _watchDrawerPosition(drawer: MdDrawer): void {
     if (!drawer) {

src/lib/sidenav/sidenav.ts

@@ -61,7 +61,7 @@ export class MdSidenavContent extends MdDrawerContent {
     'class': 'mat-drawer mat-sidenav',
     'tabIndex': '-1',
     '[@transform]': '_animationState',
-    '(@transform.start)': '_onAnimationStart()',
+    '(@transform.start)': '_onAnimationStart($event)',
     '(@transform.done)': '_onAnimationEnd($event)',
     '(keydown)': 'handleKeydown($event)',
     // must prevent the browser from aligning text based on value