NG-ZORRO v16.2.2中NzModalService内置动画如何自定义或禁用？

云上老周

2026-6-14

解决方案

1. 禁用或自定义内置动画（v16.2.2支持）

NG-ZORRO v16.2.2 的 NzModalService.create() 支持通过配置项直接禁用内置动画，同时允许添加自定义类来实现自定义动画逻辑：

禁用内置动画：在模态框配置中设置 nzAnimate: false，即可关闭默认的点击位置弹出动画。
绑定自定义标识：通过 nzClassName 指定自定义类名，为后续添加自定义动画样式提供锚点。

2. 覆盖动画的具体实现

禁用内置动画后，通过 CSS 编写从视口中心弹出的动画，彻底避免和默认动画冲突：

步骤1：调用模态框时配置参数

import { NzModalService } from 'ng-zorro-antd/modal';

// 组件内调用示例
constructor(private modalService: NzModalService) {}

openCenterModal() {
  this.modalService.create({
    nzAnimate: false, // 关闭内置动画
    nzClassName: 'center-origin-modal', // 自定义类名
    nzTitle: '中心弹出模态框',
    nzContent: '这是从视口中心缩放弹出的模态框',
    nzOnOk: () => console.log('确认')
  });
}

步骤2：编写自定义动画CSS

在全局样式文件（如 styles.css）中添加以下样式：

/* 自定义模态框缩放动画 */
.center-origin-modal .ant-modal {
  opacity: 0;
  transform: scale(0.7);
  transform-origin: center center; /* 强制动画起点为视口中心 */
  animation: centerScaleIn 0.3s ease-out forwards;
}

@keyframes centerScaleIn {
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 可选：同步背景遮罩的淡入动画 */
.center-origin-modal .ant-modal-mask {
  opacity: 0;
  animation: maskFadeIn 0.3s ease-out forwards;
}

@keyframes maskFadeIn {
  100% {
    opacity: 0.5;
  }
}