fix(overlay): disable all animations when using the NoopAnimationsModule

Disables the CSS-based animations in the overlay when using the `NoopAnimationsModule`.

Relates to #10590.

Author: crisbeto

src/cdk/overlay/_overlay.scss

@@ -90,6 +90,13 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     }
   }
 
+  .cdk-overlay-backdrop-transition-disabled {
+    // Reset the transition by overriding, rather than adding
+    // the `transition` conditionally, so we can cover the case
+    // where consumers specified their own transition.
+    transition: none;
+  }
+
   .cdk-overlay-dark-backdrop {
     background: $cdk-overlay-dark-backdrop-background;
   }

src/cdk/overlay/overlay-ref.ts

@@ -37,6 +37,7 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
    * the `_host` to its original position in the DOM when it gets re-attached.
    */
   private _previousHostParent: HTMLElement;
+
   private _keydownEventsObservable: Observable<KeyboardEvent> = Observable.create(observer => {
     const subscription = this._keydownEvents.subscribe(observer);
     this._keydownEventSubscriptions++;
@@ -47,6 +48,9 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
     };
   });
 
+  /** Whether animations are disabled for this overlay. */
+  private readonly _animationsDisabled: boolean;
+
   /** Stream of keydown events dispatched to this overlay. */
   _keydownEvents = new Subject<KeyboardEvent>();
 
@@ -60,11 +64,18 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
       private _config: ImmutableObject<OverlayConfig>,
       private _ngZone: NgZone,
       private _keyboardDispatcher: OverlayKeyboardDispatcher,
-      private _document: Document) {
+      private _document: Document,
+      /**
+       * @deprecated `animationMode` parameter to be made required.
+       * @breaking-change 8.0.0
+       */
+      animationMode?: string) {
 
     if (_config.scrollStrategy) {
       _config.scrollStrategy.attach(this);
     }
+
+    this._animationsDisabled = animationMode === 'NoopAnimations';
   }
 
   /** The overlay's HTML element */
@@ -333,6 +344,10 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
     this._backdropElement = this._document.createElement('div');
     this._backdropElement.classList.add('cdk-overlay-backdrop');
 
+    if (this._animationsDisabled) {
+      this._backdropElement.classList.add('cdk-overlay-backdrop-transition-disabled');
+    }
+
     if (this._config.backdropClass) {
       this._toggleClasses(this._backdropElement, this._config.backdropClass, true);
     }
@@ -377,24 +392,32 @@ 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);
-        }
+    if (!backdropToDetach) {
+      return;
+    }
 
-        // 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;
-        }
+    let timeoutId: number;
+    const finishDetach = () => {
+      // It may not be attached to anything in certain cases (e.g. unit tests).
+      if (backdropToDetach && backdropToDetach.parentNode) {
+        backdropToDetach.parentNode.removeChild(backdropToDetach);
+      }
 
-        clearTimeout(timeoutId);
-      };
+      // 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;
+      }
 
+      clearTimeout(timeoutId);
+    };
+
+    if (this._animationsDisabled) {
+      // When the animations are disabled via the `NoopAnimationsModule`, we can be
+      // fairly certain that they won't happen so we can remove the element immediately.
+      finishDetach();
+    } else {
       backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');
 
       if (this._config.backdropClass) {

src/cdk/overlay/overlay.spec.ts

@@ -26,6 +26,7 @@ import {
   PositionStrategy,
   ScrollStrategy,
 } from './index';
+import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 
 describe('Overlay', () => {
@@ -598,6 +599,64 @@ describe('Overlay', () => {
       expect(backdrop.classList).toContain('cdk-overlay-transparent-backdrop');
     });
 
+    it('should not disable the backdrop transition if animations are enabled', () => {
+      overlayContainer.ngOnDestroy();
+
+      TestBed
+        .resetTestingModule()
+        .configureTestingModule({
+          imports: [OverlayModule, PortalModule, OverlayTestModule, BrowserAnimationsModule],
+        })
+        .compileComponents();
+
+      inject([Overlay, OverlayContainer], (o: Overlay, oc: OverlayContainer) => {
+        overlay = o;
+        overlayContainer = oc;
+        overlayContainerElement = oc.getContainerElement();
+      })();
+
+      let fixture = TestBed.createComponent(TestComponentWithTemplatePortals);
+      fixture.detectChanges();
+      componentPortal = new ComponentPortal(PizzaMsg, fixture.componentInstance.viewContainerRef);
+      viewContainerFixture = fixture;
+
+      let overlayRef = overlay.create(config);
+      overlayRef.attach(componentPortal);
+      viewContainerFixture.detectChanges();
+
+      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+      expect(backdrop.classList).not.toContain('cdk-overlay-backdrop-transition-disabled');
+    });
+
+    it('should disable the backdrop transition when animations are disabled', () => {
+      overlayContainer.ngOnDestroy();
+
+      TestBed
+        .resetTestingModule()
+        .configureTestingModule({
+          imports: [OverlayModule, PortalModule, OverlayTestModule, NoopAnimationsModule],
+        })
+        .compileComponents();
+
+      inject([Overlay, OverlayContainer], (o: Overlay, oc: OverlayContainer) => {
+        overlay = o;
+        overlayContainer = oc;
+        overlayContainerElement = oc.getContainerElement();
+      })();
+
+      let fixture = TestBed.createComponent(TestComponentWithTemplatePortals);
+      fixture.detectChanges();
+      componentPortal = new ComponentPortal(PizzaMsg, fixture.componentInstance.viewContainerRef);
+      viewContainerFixture = fixture;
+
+      let overlayRef = overlay.create(config);
+      overlayRef.attach(componentPortal);
+      viewContainerFixture.detectChanges();
+
+      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+      expect(backdrop.classList).toContain('cdk-overlay-backdrop-transition-disabled');
+    });
+
     it('should apply multiple custom classes to the overlay', () => {
       config.backdropClass = ['custom-class-1', 'custom-class-2'];
 

src/cdk/overlay/overlay.ts

@@ -16,13 +16,15 @@ import {
   Injectable,
   Injector,
   NgZone,
+  Optional,
 } from '@angular/core';
 import {OverlayKeyboardDispatcher} from './keyboard/overlay-keyboard-dispatcher';
 import {OverlayConfig} from './overlay-config';
 import {OverlayContainer} from './overlay-container';
 import {OverlayRef} from './overlay-ref';
 import {OverlayPositionBuilder} from './position/overlay-position-builder';
 import {ScrollStrategyOptions} from './scroll/index';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 /** Next overlay unique ID. */
@@ -53,7 +55,12 @@ export class Overlay {
               private _injector: Injector,
               private _ngZone: NgZone,
               @Inject(DOCUMENT) private _document: any,
-              private _directionality: Directionality) { }
+              private _directionality: Directionality,
+              /**
+               * @deprecated `animationMode` parameter to be made required.
+               * @deletion-target 8.0.0
+               */
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string) { }
 
   /**
    * Creates an overlay.
@@ -69,7 +76,7 @@ export class Overlay {
     overlayConfig.direction = overlayConfig.direction || this._directionality.value;
 
     return new OverlayRef(portalOutlet, host, pane, overlayConfig, this._ngZone,
-      this._keyboardDispatcher, this._document);
+      this._keyboardDispatcher, this._document, this._animationMode);
   }
 
   /**

src/lib/datepicker/datepicker.spec.ts

@@ -356,13 +356,16 @@ describe('MatDatepicker', () => {
         for (let i = 0; i < 3; i++) {
           testComponent.datepicker.open();
           fixture.detectChanges();
+          flush();
 
           testComponent.datepicker.close();
           fixture.detectChanges();
+          flush();
         }
 
         testComponent.datepicker.open();
         fixture.detectChanges();
+        flush();
 
         const spy = jasmine.createSpy('close event spy');
         const subscription = testComponent.datepicker.closedStream.subscribe(spy);