android - Angular Material 对话框动画在移动设备上非常慢

Question

在我运行棉花糖的 Xperia M5 上，angular material 对话框的打开动画在 chrome 中很糟糕，即使在 angular material's own website 上也是如此。 .有没有一种方法可以仅在移动设备上为对话框禁用动画？

我已经看过 this ，但它建议禁用所有动画，并且 CSS 解决方案不起作用。

附言我正在运行 Angular 5，所有内容都已更新为稳定版本。

Answer 1

这就是我在 Android 设备上禁用对话框动画所做的。

我使用 Ng2DeviceService 来确定它是否是一个 android 设备。可以很容易地修改以寻找其他条件。

这适用于 angular 5。不确定旧版本。

我在我的 app.module.ts 中完成了这一切

添加导入

import { AnimationDriver, ɵWebAnimationsDriver, ɵNoopAnimationDriver } from '@angular/animations/browser';

创建一个动画工厂。

 /**
 * Disable animations for dialogs on slow devices
 * @returns {WebAnimationsDriver}
 */
const animationFactory = () => {
  const deviceService = new Ng2DeviceService();
  const noop = AnimationDriver.NOOP;
  const driver = new ɵWebAnimationsDriver();
  const originalAnimate = driver.animate;

  const isAndroid = deviceService.os === 'android';

  let disableComplexAnimations = false;
  if (isAndroid) {
    disableComplexAnimations = true;
  }

  driver.animate = (element: any, keyframes: {
    [key: string]: string | number;
  }[], duration: number, delay: number, easing: string, previousPlayers?: any[]) => {
    if (disableComplexAnimations && element && element.nodeName === 'MAT-DIALOG-CONTAINER') {
      return noop.animate(element, keyframes, duration, delay, easing, previousPlayers);
    } else {
      return originalAnimate(element, keyframes, duration, delay, easing, previousPlayers);
    }
  };
  return driver;
};

注册在您的提供商列表中:

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