Components: Add possibility to turn off animation of dialog enter/exit

[Abrissirba]

Is/will it be possible to turn off the animation added in https://github.com/angular/material2/pull/2825? The animation is not very smooth when the dialog contains something that needs much performance, especially in IE.

It would also be good if you could subscribe to when the animation has finished.

[SylvainSimon]

I have a problem that requires the same option.

I need to quickly unhook my closing event when I close my window. But it is blocking because the event is triggered after the animation, which easily takes 1 second.

If my user closes and re-opens the window quickly (because the overlay goes away from the beginning of the animation leaving the possibility of clicking on the button of opening of window), then it makes to disfunction the router!

So the animation is very nice but it poses functional problems in some cases!

[michastreppel]

One way of disabling this animation is the following (based on a post on StackOverflow: http://stackoverflow.com/questions/43055988/turn-off-animation-at-runtime-in-angular )

In your (main) module add the following function:

export function animationFactory(): any {
    const noop = AnimationDriver.NOOP;
    const driver = new ɵWebAnimationsDriver();
    return {
        animate: (element: any, keyframes: {
            [key: string]: string | number;
        }[], duration: number, delay: number, easing: string, previousPlayers?: any[]) => {
            if (element.tagName === 'MD-DIALOG-CONTAINER') {
                return noop.animate(element, keyframes, duration, delay, easing, previousPlayers);
            } else {
                return driver.animate(element, keyframes, duration, delay, easing, previousPlayers);
            }
        }
    };
};

Then specify in the providers section of your module
{ provide: AnimationDriver, useFactory: animationFactory }

[reppners]

Got the same problem with the animation performance even when using Chrome on a macbook - as soon as there is a component contained in the dialog that does more than just a piece of text and two buttons the animation is not smooth at all. So I'd rather have no animation than a poor performing one or at least a hook to do heavy init after animation has finished.

[thinkingmedia]

I'm looking at the code and it looks like MatDialogContainer is coded so that the function reference is used directly in the MatDialog. This means, that we can not inject a replacement class that the MatDialog service could use.

So I was thinking if a new component was added to the template of MatDialogContainer that it was changed from <ng-template cdkPortalOutlet></ng-template> to maybe this <mat-dialog-animation><ng-template cdkPortalOutlet></ng-template></mat-dialog-animation>.

This would defer the animation to another component, and also use the injector to create that component. We could then override that component by providing a different wrapper with our own animations.

[simeyla]

If this is considered could we please get easy ability to change the direction.
I don't care if it's 'against the spec'. The default just doesn't work in all situations.

[playnox]

Same issue here, Dialog and Datepicker preforms very poorly... Please give us the ability to get rid of animations.

[nicktobolski]

I'm also experiencing very poor performance on all but the best devices for dialogs when nesting components within.

[jpduckwo]

I'm also experiencing problems with this. I was wondering if there is a way to detect when the open animation completes in the dialog component then show a placeholder until the open animation completes, then switch to the full component detail... any ideas?