Как отключить Angular анимации с помощью провайдеров Dynami c? - PullRequest
1 голос
/ 01 апреля 2020

Я хочу отключить все Angular Анимации материала на моей странице во время выполнения в зависимости от предпочтений пользователя (нажатие кнопки). Я знаю, что могу сделать это путем импорта NoopAnimationsModule, но я не могу сделать это динамически (после взаимодействия с пользователем в приложении).

Я использую Angular Материал 8.2 - как правило, моя идея заключалась в том, чтобы импорт BrowserAnimationsModule обычно в моем AppModule, но для смены провайдеров. Сначала я делал это вручную:

{ provide: AnimationDriver, useClass: NoopAnimationDriver },
{ provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations' }

Это сработало, и затем я захотел воспользоваться функцией useFactory, чтобы сделать это более динамично:

{ provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations' },
{ provide: AnimationDriver,
  deps: [SomeService],
  useFactory: (someService) => someService.getDriver()
}

import { ɵNoopAnimationDriver as NoopAnimationDriver } from '@angular/animations/browser';

@Injectable({
  providedIn: 'root'
})
export class SomeService {
  animationsDisabled: boolean = true;

  constructor() {
  }

  getDriver(): any {
    if (this.animationsDisabled) {
      return new NoopAnimationDriver();
    }
  }
}

Это сработало, но когда я захотел вернуть AnimationDriver (из BrowserAnimationsModule) на основе реализации функции instantiateSupportedAnimationDriver() из здесь возникла проблема. И new WebAnimationsDriver(), и new CssKeyframesDriver(), установленные вручную, работают, но только в некоторой части. Не могу точно сказать, почему - 70% анимаций работают должным образом, 30% - нет.

import { ɵNoopAnimationDriver as NoopAnimationDriver } from '@angular/animations/browser';

@Injectable({
  providedIn: 'root'
})
export class SomeService {
  animationsDisabled: boolean = false;

  constructor() {
  }

  getDriver(): any {
    if (this.animationsDisabled) {
      return new NoopAnimationDriver();
    } else {
      return new WebAnimationsDriver();
      // or return new CssKeyframesDriver()}
  }
}

Следующая проблема / вопрос: может ли динамическое изменение поля animationsDisabled (с использованием, например, Subject) перезагрузиться? useFactory и изменить AnimationDriver? Может быть, есть какой-то другой способ сделать это?

Моя другая попытка состояла в том, чтобы использовать селектор * в CSS и устанавливать все переходы, трансформировать и другие свойства анимации, но это нарушает некоторые другие вещи, такие как заполнители:

enter image description here

Есть ли способ выполнить sh динамически во время выполнения?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...