如何在 angular material 中禁用动画

Question

我用过angular material版本：5.2.1

想知道如何禁用他们的动画，特别是 matDialog.

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

Answer 1

您可以通过 angular material

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

如何在 angular material 中禁用动画

How to disable animations in angular material

angular

angular-material-5