Components: Disable Animation Option

[userexperiences]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

An option such as disableRipple (for individual components) and a global option to do so

What is the current behavior?

Adding NoopAnimationsModule doesn't disable checkbox animation but does disable dialog and menu animation

[maxime1992]

We have the same problem on our app.

Animations are great, but in some cases we'd like to disable them.

For example, when a user wants to change workspace, we have a dialog. When he selects one, the dialog is closed.

BUT, if the user has that dialog opened and he's disconnected, we redirect to login page and it feels weird to be on login page and still see the modal closing with the animations for 1/10s.

[shaharkazaz]

+1

[pabloxn]

+1

[ryanohearn]

+1

[padilla-jm]

+1

[abcox]

I came here in search of a way to correctly use of mat-checkbox inside mat-cell of mat-table because it appears like the animation on check/uncheck causes the checkbox to be pushed up and out of view in the table row/cell. Is there a work-around or corrective way to implement checkbox in table row?

[ps1dr3x]

I have the same problem as @abcox .
I have a mat-tab-group with three tabs, each one containing a mat-table with some mat-checkbox, when i switch from a tab to another, all the views inside tabs are incorrectly rendered, more or less as abcox described.
I'm quite sure that the problem belongs to tabs' animations. It is curious that if I move very quickly from tab A to tab B and back to A, A is rendered correctly. I'm going to open a dedicated issue on this, anyway it would be nice to have an option to disable animations on components.

[abcox]

Plunker with work-around using <input type="checkbox"> styled to theme.

[reppners]

Angular animations can be disabled by setting the elements property @.disabled, see https://angular.io/api/animations/trigger#disable-animations

Under the hood @.disabled adds/removes .ng-animate-disabled class on the element where it's applied.

Treat that as an implementation detail that might change anytime without you noticing!

But its important knowledge to disable animations/transitions for components that implement them in css (like mat-checkbox, see https://github.com/angular/material2/search?l=SCSS&q=transition&type=&utf8=✓).

Because all overlays are appended to a DOM node directly at the document.body it is out of scope of any @.disabled attribute/property you are able to set declaratively. In order to disable animations on components rendered as overlays you can't just add the .ng-animate-disabled class as it's merely set as a consequence of @.disabled being present but not used to detect elements where animations should be skipped. And because @.disabled is an not a valid attribute name when invoking element.setAttribute() this is not a way to disable animations either.

Looking at the animations renderer source it's obvious to treat @.disabled as a property instead, so use setProperty() instead.

https://github.com/angular/angular/blob/14e8e880222431eeccdacac6540574b49903bd79/packages/platform-browser/animations/src/animation_renderer.ts#L179-L185

constructor( private overlayContainer:OverlayContainer, private renderer:Renderer2 ) {

    const disableAnimations:boolean = true;

    // get overlay container to set property that disables animations
    const overlayContainerElement:HTMLElement = this.overlayContainer.getContainerElement();

    // angular animations renderer hooks up the logic to disable animations into setProperty
    this.renderer.setProperty( overlayContainerElement, "@.disabled", disableAnimations );
}

This enables to dynamically disable/enable all animations code at any level. In our application its a user preference setting to make the user experience better on low-end devices that struggle with animations and transitions.

[eepstein]

@reppners This looks like a good suggestion. I tried it with a Material 2 mat-spinner, however, and it didn't seem to work. Could it be the way that component is implemented? OR do the material 2 components just not check this property?

Anyway, I added [@.disable] and the spinner still animates. Does one need to do an import for this to work?

[reppners]

@eepstein Thats because not all animations are done with angular animations. Some are implemented in css.

You can check the scss code for the progress spinner.

So your specific issue will need some custom css that you can apply by adding an extra css class to the spinners you want to behave differently and override the animation/transition code.

Check this stackblitz I put together real quick to showcase how:
https://stackblitz.com/edit/angular-material2-issue-uehuqx

[aidionidis]

@reppners I can't thank you enough for this, it worked perfectly with Angular 5.0.1

[jelbourn]

I believe this is resolved in the latest version of Angular Material; adding NoopAnimationsModule will now turn off all animations, even the ones that don't use Angular animations. Free free to comment here if that's not the case and I can re-open this.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}