diff --git a/src/lib/sidenav/drawer.spec.ts b/src/lib/sidenav/drawer.spec.ts index d5e03ec8fa4e..b97be90158d0 100644 --- a/src/lib/sidenav/drawer.spec.ts +++ b/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'); + })); + }); diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index 175485fdb0b4..72afd6b747bc 100644 --- a/src/lib/sidenav/drawer.ts +++ b/src/lib/sidenav/drawer.ts @@ -33,10 +33,8 @@ 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 {RxChain, filter, first, startWith, takeUntil} from '@angular/cdk/rxjs'; /** Throws an exception when two MatDrawer are matching the same position. */ @@ -117,7 +115,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 +175,7 @@ export class MatDrawer implements AfterContentInit, OnDestroy { private _opened: boolean = false; /** Emits whenever the drawer has started animating. */ - _animationStarted = new EventEmitter(); + _animationStarted = new EventEmitter(); /** Whether the drawer is animating. Used to prevent overlapping animations. */ _isAnimating = false; @@ -320,9 +318,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 +451,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 +472,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) { diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index 3a7e6bdacf18..883b20eb8346 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/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