Question

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

Answer 1

可能有一个优雅的解决方案，但这适用于角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);
      }
    }
  };
};

导入BrowserAnimationModule

imports: [
  ...,
  BrowserAnimationsModule,
]

使用上面的工厂函数

提供AnimationDriver

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

Answer 2

感谢@ user2957238

这是基于他的想法的包ngx-no-animation-for-dinosaur。

我还添加了一个简单的浏览器检测功能。

因此动画只会在supported browsers上启用。

您还可以通过配置在所有浏览器上禁用动画。

以下是plunker

更新：

Angular现在提供ɵNoopAnimationDriver，因此原始答案可以重构为

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

在运行时以角度关闭动画

2 个答案: