Angular material dialog animation terribly slow on mobile

Question

On my Xperia M5 running marshmallow, angular material's dialog's opening animation is terrible in chrome, even on angular material's own website. Is there a way I can disable animations only on mobile for the dialog?

I've already seen this, but it suggests disabling all animations, and the CSS solution doesn't work.

P.S. I'm running Angular 5 and everything is updated to stable.

Answer 1

This is what I did to disable dialog animations just on android devices.

I used Ng2DeviceService to determine whether it was an android device. Could be easily modified to look for other conditions.

This works for angular 5. Not sure about older versions.

I did this all in my app.module.ts

Add imports

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

Create an animation factory.

 /**
 * 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;
};

Register is in your providers list:

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