fix(overlay): backdrop exit animation not working (#10145)

Fixes the transition when closing an overlay with an opaque backdrop appearing broken. The issue comes the fact that when we start animating the backdrop out, we also remove the `backdropClass` which makes the backdrop transparent. We don't need to remove the class, because we'll remove the backdrop from the DOM and clear the reference once the transition is done.

Author: crisbeto

src/cdk/overlay/overlay-ref.ts

@@ -395,43 +395,45 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
   detachBackdrop(): void {
     let backdropToDetach = this._backdropElement;
 
-    if (backdropToDetach) {
-      let timeoutId: number;
-      let finishDetach = () => {
-        // It may not be attached to anything in certain cases (e.g. unit tests).
-        if (backdropToDetach && backdropToDetach.parentNode) {
-          backdropToDetach.parentNode.removeChild(backdropToDetach);
-        }
-
-        // It is possible that a new portal has been attached to this overlay since we started
-        // removing the backdrop. If that is the case, only clear the backdrop reference if it
-        // is still the same instance that we started to remove.
-        if (this._backdropElement == backdropToDetach) {
-          this._backdropElement = null;
-        }
+    if (!backdropToDetach) {
+      return;
+    }
 
-        clearTimeout(timeoutId);
-      };
+    let timeoutId: number;
+    let finishDetach = () => {
+      // It may not be attached to anything in certain cases (e.g. unit tests).
+      if (backdropToDetach && backdropToDetach.parentNode) {
+        backdropToDetach.parentNode.removeChild(backdropToDetach);
+      }
 
-      backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');
+      // It is possible that a new portal has been attached to this overlay since we started
+      // removing the backdrop. If that is the case, only clear the backdrop reference if it
+      // is still the same instance that we started to remove.
+      if (this._backdropElement == backdropToDetach) {
+        this._backdropElement = null;
+      }
 
       if (this._config.backdropClass) {
-        this._toggleClasses(backdropToDetach, this._config.backdropClass, false);
+        this._toggleClasses(backdropToDetach!, this._config.backdropClass, false);
       }
 
-      this._ngZone.runOutsideAngular(() => {
-        backdropToDetach!.addEventListener('transitionend', finishDetach);
-      });
+      clearTimeout(timeoutId);
+    };
 
-      // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
-      // In this case we make it unclickable and we try to remove it after a delay.
-      backdropToDetach.style.pointerEvents = 'none';
+    backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');
 
-      // Run this outside the Angular zone because there's nothing that Angular cares about.
-      // If it were to run inside the Angular zone, every test that used Overlay would have to be
-      // either async or fakeAsync.
-      timeoutId = this._ngZone.runOutsideAngular(() => setTimeout(finishDetach, 500));
-    }
+    this._ngZone.runOutsideAngular(() => {
+      backdropToDetach!.addEventListener('transitionend', finishDetach);
+    });
+
+    // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
+    // In this case we make it unclickable and we try to remove it after a delay.
+    backdropToDetach.style.pointerEvents = 'none';
+
+    // Run this outside the Angular zone because there's nothing that Angular cares about.
+    // If it were to run inside the Angular zone, every test that used Overlay would have to be
+    // either async or fakeAsync.
+    timeoutId = this._ngZone.runOutsideAngular(() => setTimeout(finishDetach, 500));
   }
 
   /** Toggles a single CSS class or an array of classes on an element. */