diff --git a/components/modal/modal-config.ts b/components/modal/modal-config.ts index ee7df0bc5ef..72e60484bad 100644 --- 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('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 index 16c012474b2..cb957a60840 100644 --- 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; @@ -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 index 535c38d3b54..999879d8305 100644 --- a/components/modal/modal.service.ts +++ b/components/modal/modal.service.ts @@ -15,6 +15,7 @@ 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'; @@ -22,7 +23,6 @@ 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 = ComponentType | TemplateRef | string; @Injectable()