如何在角度為 4 的角度材料 2 中打開對話框時禁用動畫

Question

我正在嘗試創建對話框，但問題是我想禁用對話框中的動畫，因此如何禁用它。

Answer 1

您可以通過導入禁用

NoopAnimations 模塊

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

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

更多信息https://material.angular.io/guide/getting-started

Answer 2

如果您想將動畫保留在您的應用程序上，但能夠禁用附加到對話框的動畫，您可以將對話框容器覆蓋一個，您可以控制和禁用該容器內的所有動畫。

覆蓋 OverlayContainer 組件

• 創建一個自定義 OverlayContainer，它擴展了 cdk 中的 OverlayContainer

   import { OverlayContainer } from '@angular/cdk/overlay'; export class CustomOverlayContainer extends OverlayContainer { _defaultContainerElement: HTMLElement; constructor() { super(); } public setContainer( container: HTMLElement ) { this._defaultContainerElement = this._containerElement; this._containerElement = container; } public restoreContainer() { this._containerElement = this._defaultContainerElement; } }

• 通過應用程序模塊提供程序上的自定義覆蓋 cdk OverlayContainer

   export function initOverlay() { return new CustomOverlayContainer(); } @NgModule( { ... providers: [ ... { provide: OverlayContainer, useFactory: initOverlay } ... ] ... })

替換對話框包裝器

訪問新的對話框容器並替換默認容器

export class AppComponent implements AfterViewInit {
    @ViewChild( 'dialogContainer' ) dialogContainer: ElementRef;

    constructor( private dialog: MatDialog, private overlayContainer: OverlayContainer ) {
    }

    ngAfterViewInit() {
        (this.overlayContainer as CustomOverlayContainer).setContainer( this.dialogContainer.nativeElement );

        this.dialog.open( ... );
    }
}

禁用動畫

將[@.disabled]綁定添加到您的容器，以禁用其中發生的所有動畫。https://angular.io/api/animations/trigger#disable-animations

<div #dialogContainer [@.disabled]="true"></div>

Answer 3

角材7有一個更加美好的動畫。

對於大多數想要禁用它的開發人員來說，它應該可以緩解這個問題。

它從中心打開，稍微放大，不向上或向下滑動。 關閉時它會立即消失。 它在最初隱藏底部工具欄的手機上也表現良好。

它應該在功能較弱的顯卡、舊手機或內容復雜的對話框上表現得更好。

Answer 4

剛剛遇到同樣的問題。 角度材質庫仍然沒有一種干凈的方法來禁用/配置特定疊加組件的動畫。 但是，我發現有一個 hack 對我的用例來說效果很好。

因此，想法是覆蓋附加到某個角度材質組件（例如mat-select 、 mat-menu等）的動畫。 在 Angular Material git 中，您可以在聲明了所有默認動畫的組件旁邊找到<component>-animations.ts文件（例如https://github.com/angular/components/blob/master/src/material/select/select- animations.ts - 用於mat-select ）。

了解這些 - 我們可以覆蓋我們想要為其更改動畫的每個材質組件的裝飾器屬性。 請注意，這只會對每個組件類型（即不是每個實例）執行。

以下是禁用mat-select下拉動畫的方法：

MatSelect['decorators'][0].args[0].animations[0] = trigger('transformPanelWrap', []);
MatSelect['decorators'][0].args[0].animations[1] = trigger('transformPanel', []);

上面的代碼段刪除了mat-select下拉列表的所有動畫。 觸發器名稱取自上述文件（檢查材料來源）。 您還可以以相同的方式輕松地用自定義動畫替換現有動畫，例如

MatSelect['decorators'][0].args[0].animations[1] = trigger('transformPanel', [
    state('void', style({
       transform: 'scale(0.1)',
       opacity: 0
    })),
]);

animations數組內的索引對應於原始動畫聲明順序。 ['decorators'][0].args[0]總是相同的。

最初的想法來自： https : //github.com/angular/components/issues/8857#issuecomment-401793529