动画开关
动画开关
从 v21 版本开始,NG-ZORRO 完全使用 native animation 实现动画效果,你可以按需移除
@angular/animations依赖。
NG-ZORRO 允许开发者关闭动画效果,您可以通过添加对应指令或者配置来设置动画的开关,也可以通过全局配置关闭所有动画。
在全局或组件中关闭#
provideNoopAnimations 已被标记为废弃,你可以通过 provideNzNoAnimation 来关闭动画。
import { provideNzNoAnimation } from 'ng-zorro-antd/core/animation';
// 在全局中关闭动画
export const appConfig: ApplicationConfig = {
providers: [
// ...
provideNzNoAnimation()
]
};
// 在组件中关闭动画
@Component({
providers: [
// ...
provideNzNoAnimation()
]
})
在模版中关闭#
引入 NzNoAnimationDirective 指令,在期望关闭动画的组件上添加 nzNoAnimation 指令。
<nz-modal nzNoAnimation></nz-modal> <ul nz-menu nzNoAnimation></ul>
在服务中关闭#
在调用组件服务时传入以下配置来关闭动画。
Modal, Drawer#
{
// ...
nzNoAnimation: true;
}
Notification, Message#
{
// ...
nzAnimate: false;
}
关闭波浪效果#
部分组件(如:Button)为了支持波纹效果,使用了动态样式,因此无法直接使用样式覆盖。
你可以通过 provideNzWave 或者使用 provideNzNoAnimation 来关闭波浪效果。
import { provideNzWave } from 'ng-zorro-antd/core/wave';
export const appConfig: ApplicationConfig = {
providers: [provideNzWave({ disabled: true })]
};