Skip to content

Commit

Permalink
fix(drawer): backdrop not transitioning on close
Browse files Browse the repository at this point in the history
Fixes the drawer backdrop not animating away on close. Also moves the drawer transitions together with all the other transitions since we don't exclude the `drawer-transitions.scss` from tests anymore.
  • Loading branch information
crisbeto committed Sep 23, 2017
1 parent 3571f68 commit c2070e7
Show file tree
Hide file tree
Showing 5 changed files with 19 additions and 24 deletions.
16 changes: 0 additions & 16 deletions src/lib/sidenav/drawer-transitions.scss

This file was deleted.

16 changes: 16 additions & 0 deletions src/lib/sidenav/drawer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,14 @@ $mat-drawer-over-drawer-z-index: 4;
visibility: visible;
}

.mat-drawer-transition & {
transition: {
duration: $swift-ease-out-duration;
timing-function: $swift-ease-out-timing-function;
property: background-color, visibility;
}
}

@include cdk-high-contrast {
opacity: 0.5;
}
Expand All @@ -76,6 +84,14 @@ $mat-drawer-over-drawer-z-index: 4;
display: block;
height: 100%;
overflow: auto;

.mat-drawer-transition & {
transition: {
duration: $swift-ease-out-duration;
timing-function: $swift-ease-out-timing-function;
property: transform, margin-left, margin-right;
}
}
}

.mat-drawer {
Expand Down
1 change: 1 addition & 0 deletions src/lib/sidenav/drawer.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ describe('MdDrawer', () => {
let drawer = fixture.debugElement.query(By.directive(MdDrawer));
let drawerBackdropElement = fixture.debugElement.query(By.css('.mat-drawer-backdrop'));

drawerBackdropElement.nativeElement.style.transition = 'none';
fixture.debugElement.query(By.css('.open')).nativeElement.click();
fixture.detectChanges();

Expand Down
5 changes: 1 addition & 4 deletions src/lib/sidenav/drawer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -360,10 +360,7 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
moduleId: module.id,
selector: 'md-drawer-container, mat-drawer-container',
templateUrl: 'drawer-container.html',
styleUrls: [
'drawer.css',
'drawer-transitions.css',
],
styleUrls: ['drawer.css'],
host: {
'class': 'mat-drawer-container',
},
Expand Down
5 changes: 1 addition & 4 deletions src/lib/sidenav/sidenav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,7 @@ export class MdSidenav extends MdDrawer {
moduleId: module.id,
selector: 'md-sidenav-container, mat-sidenav-container',
templateUrl: 'sidenav-container.html',
styleUrls: [
'drawer.css',
'drawer-transitions.css',
],
styleUrls: ['drawer.css'],
host: {
'class': 'mat-drawer-container mat-sidenav-container',
},
Expand Down

0 comments on commit c2070e7

Please sign in to comment.