fix(drawer): backdrop not transitioning on close

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.

Author: crisbeto

src/lib/sidenav/drawer-transitions.scss

@@ -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;
   }
@@ -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 {

src/lib/sidenav/drawer.scss

@@ -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();
 

src/lib/sidenav/drawer.spec.ts

@@ -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',
   },

src/lib/sidenav/drawer.ts

@@ -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',
   },