移动设备上的角度材质对话框动画非常慢

Question

在运行棉花糖的Xperia M5上,即使在角度材料自己的网站上,角度材质对话框的开启动画也很糟糕.有没有办法我只能在移动设备上禁用对话框的动画？

我已经看过这个,但它建议禁用所有动画,CSS解决方案不起作用.

PS我正在运行Angular 5,一切都更新到稳定.

Answer 1

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

\n\n

我使用Ng2DeviceService来确定它是否是android设备。可以轻松修改以寻找其他条件。

\n\n

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

\n\n

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

\n\n

添加进口

\n\n

import { AnimationDriver, \xc9\xb5WebAnimationsDriver, \xc9\xb5NoopAnimationDriver } from '@angular/animations/browser';\n

\n\n

创建动画工厂。

\n\n

 /**\n * Disable animations for dialogs on slow devices\n * @returns {WebAnimationsDriver}\n */\nconst animationFactory = () => {\n  const deviceService = new Ng2DeviceService();\n  const noop = AnimationDriver.NOOP;\n  const driver = new \xc9\xb5WebAnimationsDriver();\n  const originalAnimate = driver.animate;\n\n  const isAndroid = deviceService.os === 'android';\n\n  let disableComplexAnimations = false;\n  if (isAndroid) {\n    disableComplexAnimations = true;\n  }\n\n  driver.animate = (element: any, keyframes: {\n    [key: string]: string | number;\n  }[], duration: number, delay: number, easing: string, previousPlayers?: any[]) => {\n    if (disableComplexAnimations && element && element.nodeName === 'MAT-DIALOG-CONTAINER') {\n      return noop.animate(element, keyframes, duration, delay, easing, previousPlayers);\n    } else {\n      return originalAnimate(element, keyframes, duration, delay, easing, previousPlayers);\n    }\n  };\n  return driver;\n};\n

\n\n

注册位于您的提供商列表中：

\n\n

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

\n