Turn off animation at runtime in angular

Question

I understand I can use BrowserAnimationModule and NoopAnimationsModule when I bootstrap the application. What is the recommended way to turn off animation at run-time, if the user requests it for ADA and other reasons?

Answer 1

There may be an elegant solution but this works as of angular 4.0.0: (Disclaimer I found the basis for this code for 2.0)

In your app.module add these imports:

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 },
]