动画开关

NG-ZORRO 允许开发者关闭动画效果,您可以通过添加对应指令或者配置来设置动画的开关,也可以通过全局配置关闭所有动画。

在全局关闭

在模块中使用 NoopAnimationsModule 替换 BrowserAnimationsModule

  1. @NgModule({
  2. imports: [
  3. ...
  4. NoopAnimationsModule
  5. ]
  6. })

在模版中关闭

引入 NzNoAnimationModule 模块。

  1. import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
  2. @NgModule({
  3. imports: [
  4. ...
  5. NzNoAnimationModule
  6. ]
  7. })

在想关闭动画的组件上添加 nzNoAnimation 指令。

  1. <nz-modal nzNoAnimation></nz-modal>
  2. <ul nz-menu nzNoAnimation></ul>
  3. <nz-form-explain [nzNoAnimation]="true"></nz-form-explain>

在服务中关闭

在调用组件服务时传入以下配置来关闭动画。

Modal, Drawer

  1. {
  2. ...,
  3. nzNoAnimation: true
  4. }

Notification, Message

  1. {
  2. ...,
  3. nzAnimate: false
  4. }

关闭波浪效果

部分组件(如:Button)为了支持波纹效果,使用了动态样式,因此无法直接使用样式覆盖。但是你可以通过设置提供商 NZ_WAVE_GLOBAL_CONFIG 或者使用 NoopAnimationsModule 来关闭波浪效果。

  1. @NgModule({
  2. ...
  3. providers : [
  4. ...,
  5. {
  6. provide: NZ_WAVE_GLOBAL_CONFIG, useValue: {
  7. disabled: true
  8. }
  9. }
  10. ]
  11. })