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

@@ -326,6 +326,7 @@ describe('MatDrawerContainer', () => {
       declarations: [
         DrawerContainerTwoDrawerTestApp,
         DrawerDelayed,
+        DrawerSetToOpenedTrue,
         DrawerContainerStateChangesTestApp,
       ],
     });
@@ -417,6 +418,17 @@ describe('MatDrawerContainer', () => {
     expect(parseInt(contentElement.style.marginLeft)).toBeLessThan(initialMargin);
   }));
 
+  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,10 +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 MatDrawer are matching the same position. */
@@ -117,7 +116,7 @@ export class MatDrawerContent 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
@@ -177,7 +176,7 @@ export class MatDrawer 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;
@@ -320,9 +319,9 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
     }
   }
 
-  _onAnimationStart() {
+  _onAnimationStart(event: AnimationEvent) {
     this._isAnimating = true;
-    this._animationStarted.emit();
+    this._animationStarted.emit(event);
   }
 
   _onAnimationEnd(event: AnimationEvent) {
@@ -453,13 +452,19 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
    * is properly hidden.
    */
   private _watchDrawerToggle(drawer: MatDrawer): 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(() =>
@@ -468,8 +473,8 @@ export class MatDrawerContainer 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: MatDrawer): void {
     if (!drawer) {

src/lib/sidenav/sidenav.ts

@@ -61,7 +61,7 @@ export class MatSidenavContent extends MatDrawerContent {
     '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