From 804f4c077dd45ba580768ba35608720f04f00504 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 20 Jul 2017 06:11:19 +0300 Subject: [PATCH] fix(sidenav): first animation not working in Angular 4.2+ (#5821) Fixes #5673 --- src/lib/sidenav/sidenav.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index ca2cd5382e31..2b789b729999 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -334,7 +334,6 @@ export class MdSidenav implements AfterContentInit, OnDestroy { ], host: { 'class': 'mat-sidenav-container', - '[class.mat-sidenav-transition]': '_enableTransitions', }, encapsulation: ViewEncapsulation.None, }) @@ -363,9 +362,6 @@ export class MdSidenavContainer implements AfterContentInit { private _left: MdSidenav | null; private _right: MdSidenav | null; - /** Whether to enable open/close trantions. */ - _enableTransitions = false; - constructor(@Optional() private _dir: Directionality, private _element: ElementRef, private _renderer: Renderer2, private _ngZone: NgZone) { // If a `Dir` directive exists up the tree, listen direction changes and update the left/right @@ -384,8 +380,12 @@ export class MdSidenavContainer implements AfterContentInit { }); this._validateDrawers(); - // Give the view a chance to render the initial state, then enable transitions. - first.call(this._ngZone.onMicrotaskEmpty).subscribe(() => this._enableTransitions = true); + // 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 */