Я хочу отключить все 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 и устанавливать все переходы, трансформировать и другие свойства анимации, но это нарушает некоторые другие вещи, такие как заполнители:
Есть ли способ выполнить sh динамически во время выполнения?