How to disable animation while opening dialog in angular material 2 with angular 4

问题

I'm trying to create the dialog but problem is I want to disable the animation in the dialog so how to disable it.

回答1:

In case you want to keep your animations on your app but being able to disable the one attached to a dialog you can override the dialog container by one you can control and disable all the animations inside that container.

Override OverlayContainer component

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
         }
         ...
     ]
     ...
})

Replace the dialog wrapper

Get access to the new dialog container and replace the default one

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( ... );
    }
}

Disable animations

Add the [@.disabled] binding to your container in order to disable all the animations happening inside it. https://angular.io/api/animations/trigger#disable-animations

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

回答2:

you can disable by importing

NoopAnimationsModule

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

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

more info https://material.angular.io/guide/getting-started

回答3:

Angular Material 7 has a much nicer animation.

It should alleviate the problem for most developers wanting to disable it.

It opens from the center, zooming in slightly and without sliding up or down. On close it disappears instantly. It also behaves nicely on phones where the bottom toolbar is initially hidden.

It should perform much better on less capable graphics cards, older phones or dialogs with complex content.

来源：https://stackoverflow.com/questions/44611446/how-to-disable-animation-while-opening-dialog-in-angular-material-2-with-angular

标签

angular

angular-material