angular - 在运行时以 Angular 关闭动画

Question

我知道我可以在引导应用程序时使用 BrowserAnimationModule 和 NoopAnimationsModule。如果用户出于 ADA 和其他原因请求关闭动画，推荐的运行时关闭动画的方法是什么？

Answer 1

可能有一个优雅的解决方案，但这从 angular 4.0.0 开始有效: (免责声明我为2.0找到了这段代码的基础)

在您的 app.module 中添加这些导入:

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

添加这个函数:

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

导入浏览器动画模块

imports: [
  ...,
  BrowserAnimationsModule,
] 

提供AnimationDriver，使用上面的工厂函数

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