fix(drawer): backdrop not transitioning on close (#6651)

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('MatDrawer', () => {
       let drawer = fixture.debugElement.query(By.directive(MatDrawer));
       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

@@ -355,10 +355,7 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
   moduleId: module.id,
   selector: '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 MatSidenav extends MatDrawer {
   moduleId: module.id,
   selector: 'mat-sidenav-container',
   templateUrl: 'sidenav-container.html',
-  styleUrls: [
-    'drawer.css',
-    'drawer-transitions.css',
-  ],
+  styleUrls: ['drawer.css'],
   host: {
     'class': 'mat-drawer-container mat-sidenav-container',
   },