Angular 如何在“角度材质2”和“角度4”中打开对话框时禁用动画

我正在尝试创建对话框，但问题是我想禁用对话框中的动画，因此如何禁用它。

您可以通过导入来禁用它

NoopAnimationsModule

更多信息

---

如果您希望将动画保留在应用程序中，但能够禁用附加到对话框的动画，则可以覆盖对话框容器中的动画，您可以控制并禁用该容器中的所有动画

覆盖覆盖容器组件

• 创建一个自定义OverlyContainer，它扩展了cdk中的OverlyContainer

  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 OverlyContainer

  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]

绑定添加到容器中，以禁用容器中发生的所有动画

Angular Material 7的动画效果更好。 对于大多数想要禁用它的开发人员来说，它应该可以缓解这个问题

它从中心打开，稍微放大，没有上下滑动。一旦关闭，它立即消失。它在手机上的表现也很好，手机的底部工具栏最初是隐藏的

---

在功能较差的显卡、老式手机或内容复杂的对话框上，它的性能应该会更好。

刚刚遇到了同样的问题。Angular material lib仍然没有一种干净的方法来禁用/配置特定覆盖组件的动画。然而，我发现有一个黑客对我的用例足够有效

因此，想法是覆盖附加到特定角度材质组件的动画（例如，

mat-select

，

mat-menu

，等等）。在Angular Material git中，您可以在声明了所有默认动画的组件旁边找到

-animations.ts

文件（例如，对于

材质选择
）

了解这些-我们可以覆盖每个要更改动画的材质组件的装饰器属性。请注意，这将仅对每个组件类型（即不是每个实例）执行

以下是如何为
mat select
下拉菜单禁用动画：

MatSelect['decorators'][0]。args[0]。动画[0]=触发器（'transformPanelWrap'，[]）；
MatSelect['decorators'][0]。args[0]。动画[1]=触发器（'transformPanel'，[]）；

上面的代码片段删除了
mat select
下拉列表中的所有动画。触发器名称取自上述文件（检查材料来源）。您还可以用相同的方式轻松地将现有动画替换为自定义动画，例如

MatSelect['decorators'][0]。args[0]。动画[1]=触发器（'transformPanel'[
状态（'void'，样式({
变换：“比例（0.1）”，
不透明度：0
})),
]);

动画
数组中的索引与原始动画声明顺序相对应<代码>['decorators'][0]。参数[0]
始终相同

最初的想法来自：
从“@angular/platform browser/animations”导入{NoopAnimationsModule}而不是
导入{BrowserAnimationsModule}@angular/platform browser/animations'在主
AppModule
中，并放置在
imports
数组中。这将完全关闭动画。除此之外，还不清楚你在问什么。如果我想在特定条件下禁用动画，那么我应该怎么做。尝试在组件字段示例中添加转换。mat对话框容器{transition:none；}乐意帮助！！这对我不起作用，我认为这不再是一个过渡。这就像通过打开开关来关闭电视：-/知道如何修改动画使其向下而不是向上动画吗？我尝试使用此技术替代我自己的动画触发器，而不是
[@.disabled]
，我的触发器被忽略@Yuri是否可以使用我自己的动画触发器（用于从右侧滑入）而不是禁用内置触发器？@Yuri，它可以工作，但会禁用使用
defaultContainerElement
的所有其他组件，例如
matMenu
（垂直三点），我可以看到
restore
功能，但是当应用程序初始化所有其他使用
defaultContainerElement
的组件时，我如何才能正常使用它？
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( ... );
    }
}

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