如何禁用角度材料中的动画答案

【问题标题】：How to disable animations in angular material如何禁用角度材料中的动画
【发布时间】：2018-10-27 08:23:21
【问题描述】：

我使用了角度材质版本：5.2.1

想知道如何禁用他们的动画，尤其是 matDialog。

我尝试过@.disabled，但没有成功。

【问题讨论】：

您为什么要这样做？有什么具体原因吗？
客户的偏好。模态上没有花哨的动画
在材质库中跟踪了一个关于仅禁用对话框动画Add possibility to turn off animation of dialog enter/exit 的功能请求

标签： angular angular-material-5

【解决方案1】：

您可以通过角度材质使用NoopAnimationsModule

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

或者，如果您想删除某些特定组件上的过渡，您可以像这样通过 CSS 来实现

.mat-dialog{ transition: none; }

【讨论】：

就这样吗？只需导入 NoopAnimationsModule？
是的，有关此模块的更多信息，您可以参考material.angular.io/guide/getting-started
有效，但您应该提到在主应用程序模块中导入。
如果您使用的是延迟加载的模块，我不觉得要导入 app.module 是不是 @EdgarQuintero？
如果您导入“NoopAnimationsModule”，那么微调器也将不起作用。 .mat-dialog 转换什么都不做。

【解决方案2】：

批准的答案不起作用，并且与 Angular 文档不一致，至少从 Angular 6 开始。要在 Angular 6 到 13 中禁用动画，from the official doc，请使用：

// In app.component.ts

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @HostBinding('@.disabled')
  public animationsDisabled = true;  // Set to true to disable animations
}

这对于端到端 (E2E) 测试很有用。

【讨论】：