From 6309faa3726ffef8ae6eb19681237bf50b00b5a9 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Wed, 26 Jul 2017 10:42:05 -0700 Subject: [PATCH] fix(sidenav): animate sidenav on open/close changes --- src/lib/sidenav/sidenav.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index 62372e1c739a..329a5b066776 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -379,13 +379,6 @@ export class MdSidenavContainer implements AfterContentInit { this._watchSidenavAlign(sidenav); }); this._validateDrawers(); - - // Give the view a chance to render the initial state, then enable transitions. Note that we - // don't use data binding, because we're not guaranteed that newer version of Angular will - // re-evaluate them after we set the flag here. - first.call(this._ngZone.onMicrotaskEmpty).subscribe(() => { - this._renderer.addClass(this._element.nativeElement, 'mat-sidenav-transition'); - }); } /** Calls `open` of both start and end sidenavs */ @@ -409,6 +402,9 @@ export class MdSidenavContainer implements AfterContentInit { */ private _watchSidenavToggle(sidenav: MdSidenav): void { merge(sidenav.onOpenStart, sidenav.onCloseStart).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-sidenav-transition'); this._changeDetectorRef.markForCheck(); });