Turn off runtime animation in angular

Question

As far as I understand, I can use BrowserAnimationModule and NoopAnimationsModule when I download the application. What is the recommended way to turn off animation at runtime if the user requests it for ADA and other reasons?

Answer 1

It may be an elegant solution, but it works like angular 4.0.0: (Disclaimer I found the basis for this code for 2.0)

Add the following imports to your app.module:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AnimationDriver, ɵWebAnimationsDriver } from '@angular/animations/browser';

Add this 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 (!wantToAnimate) {
        return noop.animate(element, keyframes, duration, delay, easing, previousPlayers);
      } else {
        return driver.animate(element, keyframes, duration, delay, easing, previousPlayers);
      }
    }
  };
};

import BrowserAnimationModule

imports: [
  ...,
  BrowserAnimationsModule,
] 

provide AnimationDriver using the factory function above

providers: [
  ...,
  { provide: AnimationDriver, useFactory: animationFactory },
]

Answer 2

kudos to @ user2957238

ngx-no-animation-for-dinosaur .

.

, .

.

plunker

update:

Angular ɵNoopAnimationDriver,

 if (!isSupported) {
        return new ɵNoopAnimationDriver();
    } else {
        return new ɵWebAnimationsDriver();
    }