From 1a31d66149a75e976ef90642611a7747a19c0720 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Mon, 17 Jul 2017 19:37:10 +0300 Subject: [PATCH] fix(sidenav): first animation not working in Angular 4.2+ Fixes the first opening/closing animation not working in newer Angular versions. The issue is due to the fact that Angular no longer evaluates the `_enableTransitions` binding after we've set it in the microtask empty callback. These changes switch to setting the class directly, which also has the advantage of being a little more compact. 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 */