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

Question

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

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

我试过@.disabled 但没有运气。

Answer 1

您可以使用角度材质的NoopAnimationsModule

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

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

或者，如果要删除某些特定组件的转换，可以通过CSS这样做

.mat-dialog{ transition: none; }

Answer 2

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

// 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) 测试很有用。