fix(module:modal): NoopAnimations do not work with modal mask (#5103)

close #5093
NG-ZORRO · Apr 23, 2020 · d7625db · d7625db
1 parent d0b40ce
commit d7625db
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 18 deletions.
diff --git a/components/modal/modal-config.ts b/components/modal/modal-config.ts
@@ -13,3 +13,19 @@ export interface NzModalConfig {
   nzMaskClosable?: boolean;
 }
 export const NZ_MODAL_CONFIG = new InjectionToken<NzModalConfig>('NZ_MODAL_CONFIG');
+
+export const ZOOM_CLASS_NAME_MAP = {
+  enter: 'zoom-enter',
+  enterActive: 'zoom-enter-active',
+  leave: 'zoom-leave',
+  leaveActive: 'zoom-leave-active'
+};
+
+export const FADE_CLASS_NAME_MAP = {
+  enter: 'fade-enter',
+  enterActive: 'fade-enter-active',
+  leave: 'fade-leave',
+  leaveActive: 'fade-leave-active'
+};
+
+export const MODAL_MASK_CLASS_NAME = 'ant-modal-mask';
diff --git a/components/modal/modal-container.ts b/components/modal/modal-container.ts
@@ -13,6 +13,7 @@ import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } fr
 import { ChangeDetectorRef, ComponentRef, ElementRef, EmbeddedViewRef, EventEmitter, NgZone, Renderer2 } from '@angular/core';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { getElementOffset } from 'ng-zorro-antd/core/util';
+import { FADE_CLASS_NAME_MAP, MODAL_MASK_CLASS_NAME, ZOOM_CLASS_NAME_MAP } from './modal-config';
 
 import { NzModalRef } from './modal-ref';
 import { ModalOptions } from './modal-types';
@@ -21,20 +22,6 @@ export function throwNzModalContentAlreadyAttachedError(): never {
   throw Error('Attempting to attach modal content after content is already attached');
 }
 
-const ZOOM_CLASS_NAME_MAP = {
-  enter: 'zoom-enter',
-  enterActive: 'zoom-enter-active',
-  leave: 'zoom-leave',
-  leaveActive: 'zoom-leave-active'
-};
-
-const FADE_CLASS_NAME_MAP = {
-  enter: 'fade-enter',
-  enterActive: 'fade-enter-active',
-  leave: 'fade-leave',
-  leaveActive: 'fade-leave-active'
-};
-
 export class BaseModalContainer extends BasePortalOutlet {
   portalOutlet: CdkPortalOutlet;
   modalElementRef: ElementRef<HTMLDivElement>;
@@ -187,12 +174,16 @@ export class BaseModalContainer extends BasePortalOutlet {
   }
 
   private setExitAnimationClass(): void {
-    if (this.animationDisabled()) {
-      return;
-    }
     this.zone.runOutsideAngular(() => {
       const modalElement = this.modalElementRef.nativeElement;
       const backdropElement = this.overlayRef.backdropElement;
+
+      if (this.animationDisabled()) {
+        // https://github.com/angular/components/issues/18645
+        this.render.removeClass(backdropElement, MODAL_MASK_CLASS_NAME);
+        return;
+      }
+
       this.render.addClass(modalElement, ZOOM_CLASS_NAME_MAP.leave);
       this.render.addClass(modalElement, ZOOM_CLASS_NAME_MAP.leaveActive);
       this.render.addClass(backdropElement, FADE_CLASS_NAME_MAP.leave);
@@ -269,6 +260,9 @@ export class BaseModalContainer extends BasePortalOutlet {
   }
 
   onAnimationDone(event: AnimationEvent): void {
+    if (event.toState === 'void') {
+      return;
+    }
     if (event.toState === 'enter') {
       this.setContainer();
       this.trapFocus();

diff --git a/components/modal/modal.service.ts b/components/modal/modal.service.ts
@@ -15,14 +15,14 @@ import { isNotNil } from 'ng-zorro-antd/core/util';
 import { defer, Observable, Subject } from 'rxjs';
 import { startWith } from 'rxjs/operators';
 
+import { MODAL_MASK_CLASS_NAME } from './modal-config';
 import { NzModalConfirmContainerComponent } from './modal-confirm-container.component';
 import { BaseModalContainer } from './modal-container';
 import { NzModalContainerComponent } from './modal-container.component';
 import { NzModalRef } from './modal-ref';
 import { ConfirmType, ModalOptions } from './modal-types';
 import { applyConfigDefaults, setContentInstanceParams } from './utils';
 
-const MODAL_MASK_CLASS_NAME = 'ant-modal-mask';
 type ContentType<T> = ComponentType<T> | TemplateRef<T> | string;
 
 @Injectable()