logo标签列表

如何在使用Angular 4和Angular Material 2时禁用打开对话框时的动画？

angularangular-material
12

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

3
在您的主要的 AppModule 中，将 import { BrowserAnimationsModule } '@angular/platform-browser/animations'; 替换为 import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 并将其放置在 imports 数组中。这将完全关闭动画效果。除此之外，不清楚您要问什么。 - Neil Lunn
4个回答
11

你可以通过导入

NoopAnimationsModule

来禁用它。

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

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

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

5
如果我想在特定条件下禁用动画，我应该怎么做？ - Omkar Yadav
3
尝试在您的组件字段中添加过渡效果，例如.mat-dialog-container{ transition: none; } - CharanRoot
很高兴能帮忙！ - CharanRoot
2
这对我不起作用，我认为它不再是一个转换了。 - amouly
3
这就像通过去电路开关来关闭你的电视一样 :-/ - Simon_Weaver
4
如果您想在应用程序中保留动画，但希望能够禁用与对话框相关联的动画，则可以通过一个可控的对话框容器来覆盖对话框容器，并禁用该容器内的所有动画。
覆盖OverlayContainer组件。

  • Create a custom OverlayContainer which extends the one from the 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;
    }
}

  • Override the cdk OverlayContainer by the custom one on the app module providers

    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>
有没有想法如何修改动画使其向下播放，而不是向上？ - Simon_Weaver
我尝试使用这种技术来替换我的动画触发器，而不是[@.disabled]，但我的触发器被忽略了。@Yuri有没有办法使用我自己的动画触发器（从右侧滑入）代替禁用内置的触发器？ - FirstVertex
@yuri，它可以运行但是它禁用了所有其他使用 defaultContainerElement 的组件，例如 matMenu（垂直三个点），我可以看到 restore 函数，但如何使用它以使应用程序初始化时使用 defaultContainerElement 的所有其他组件都正常工作？ - user12163165
2

Angular Material 7的动画效果更加出色。

这应该可以缓解大多数想要禁用它的开发者的问题。

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

在图形卡性能较差、旧手机或包含复杂内容的对话框上，它的表现应该更加出色。

1
我刚遇到了同样的问题。Angular Material库仍然没有一种清晰的方式来禁用/配置特定覆盖组件的动画。然而，我发现一个很好的方法可以解决我的问题。
因此，想法是覆盖附加到某个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 - 用于mat-select）。
知道这些后，我们可以覆盖每个要更改其动画的材料组件的装饰器属性。请注意，这只会按组件类型执行，而不是按实例执行。
以下是如何禁用mat-select下拉列表的动画：
MatSelect['decorators'][0].args[0].animations[0] = trigger('transformPanelWrap', []);
MatSelect['decorators'][0].args[0].animations[1] = trigger('transformPanel', []);

上面的代码片段删除了所有 mat-select 下拉列表的动画。触发器名称来自上述描述的文件（请检查 Material 资源）。您也可以轻松地使用相同的方式替换现有动画为自定义动画。
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
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接