Skip to content

Commit

Permalink
fix(drawer): avoid initial animation when rendering on the server
Browse files Browse the repository at this point in the history
Prevents drawers that are open by default from animating on init if they're rendered on the server.

Fixes #6865.
  • Loading branch information
crisbeto committed Dec 5, 2017
1 parent 5690c87 commit d159ad0
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
16 changes: 14 additions & 2 deletions src/lib/sidenav/drawer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import {FocusTrap, FocusTrapFactory, FocusMonitor, FocusOrigin} from '@angular/c
import {Directionality} from '@angular/cdk/bidi';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {ESCAPE} from '@angular/cdk/keycodes';
import {Platform} from '@angular/cdk/platform';
import {
AfterContentChecked,
AfterContentInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand Down Expand Up @@ -139,7 +141,7 @@ export class MatDrawerContent implements AfterContentInit {
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
})
export class MatDrawer implements AfterContentInit, OnDestroy {
export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestroy {
private _focusTrap: FocusTrap;
private _elementFocusedBeforeDrawerWasOpened: HTMLElement | null = null;

Expand Down Expand Up @@ -257,6 +259,7 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
constructor(private _elementRef: ElementRef,
private _focusTrapFactory: FocusTrapFactory,
private _focusMonitor: FocusMonitor,
private _platform: Platform,
@Optional() @Inject(DOCUMENT) private _doc: any) {
this.openedChange.subscribe((opened: boolean) => {
if (opened) {
Expand Down Expand Up @@ -295,7 +298,16 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
ngAfterContentInit() {
this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
this._focusTrap.enabled = this._isFocusTrapEnabled;
this._enableAnimations = true;
}

ngAfterContentChecked() {
// Enable the animations after the lifecycle hooks have run, in order to avoid animating
// drawers that are open by default. When we're on the server, we shouldn't enable the
// animations, because we don't want the drawer to animate the first the the user sees
// the page.
if (this._platform.isBrowser) {
this._enableAnimations = true;
}
}

ngOnDestroy() {
Expand Down
2 changes: 2 additions & 0 deletions src/lib/sidenav/sidenav-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {MatCommonModule} from '@angular/material/core';
import {ScrollDispatchModule} from '@angular/cdk/scrolling';
import {PlatformModule} from '@angular/cdk/platform';
import {MatSidenav, MatSidenavContainer, MatSidenavContent} from './sidenav';
import {
MatDrawer,
Expand All @@ -28,6 +29,7 @@ import {
A11yModule,
OverlayModule,
ScrollDispatchModule,
PlatformModule,
],
exports: [
MatCommonModule,
Expand Down

0 comments on commit d159ad0

Please sign in to comment.