Animación de diálogo de material angular terriblemente lenta en dispositivos móviles

9

En mi Xperia M5 con malvavisco, la animación de apertura del diálogo del material angular es terrible en cromo, incluso en el sitio web del material angular . ¿Hay alguna manera de deshabilitar las animaciones solo en dispositivos móviles para el diálogo?

Ya he visto esto , pero sugiere deshabilitar todas las animaciones, y la solución CSS no funciona.

PD: estoy ejecutando Angular 5 y todo se actualiza a estable.

  • 0
    ¿Encontraste una solución para esto? – 
  • 0
    @ GustavoAriasMéndez, no, nada todavía: / – 
Etiquetas de preguntas:
angular
google-chrome
animation
angular-material2

1 respuesta

-1
Mejor respuesta

Esto es lo que hice para deshabilitar las animaciones de diálogo solo en dispositivos Android.

Usé Ng2DeviceService para determinar si se trataba de un dispositivo Android. Podría modificarse fácilmente para buscar otras condiciones.

Esto funciona para angular 5. No estoy seguro acerca de las versiones anteriores.

Hice todo esto en mi app.module.ts

Agregar importaciones

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

Crea una fábrica de animación.

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

Registrarse está en su lista de proveedores:

  providers: [
    { provide: AnimationDriver, useFactory: animationFactory },
  ],
La respuesta fue
Fuente
  • 0
    No se debe usar ninguna ficha con el prefijo ɵ . Se consideran privados y pueden romperse en cualquier momento. – 
Comunidad Progexpertos
Arriba
Menu