Question

我试图创建对话框，但问题是我想在对话框中禁用动画，以便如何禁用它。

Answer 1

您可以通过导入

禁用

NoopAnimationsModule

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

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

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

Answer 2

如果你想在你的应用程序上保留动画，但是能够禁用附加到对话框的动画，你可以用一个可以控制的对话框，并禁用该容器内的所有动画。

覆盖OverlayContainer组件

创建一个自定义的OverlayContainer，它扩展了cdk

中的一个

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

Angular Material 7的动画效果好很多。

对于大多数想要禁用它的开发人员来说，它应该可以减轻该问题。

它从中心打开，略微放大并且没有上下滑动。关闭时，它会立即消失。在最初隐藏底部工具栏的手机上，它也表现良好。

在功能不佳的图形卡，较旧的手机或内容复杂的对话框上，它的性能应更好。

Answer 4

刚遇到同样的问题。角度材质库仍然没有一种干净的方法来禁用/配置特定叠加组件的动画。但是，我发现有一个 hack 对我的用例来说效果很好。

因此，想法是覆盖附加到某个 Angular Material 组件（例如 mat-select、mat-menu 等）的动画。在 Angular Material git 中，您可以在声明了所有默认动画的组件旁边找到 <component>-animations.ts 文件（例如 https://github.com/angular/components/blob/master/src/material/select/select-animations.ts - for 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

如何在角度材料2中以角度4打开对话框时禁用动画

4 个答案:

Angular Material 7的动画效果好很多。