以用户身份禁用角度动画

Question

我们正在使用 RPA 自动化第三方应用程序。该应用程序是用 Angular 17 编写的，并且启用了许多默认动画（例如展开折叠的面板） - 这会导致延迟和可能的问题。

该页面不受“prefers-reduced-animation”或禁用动画的操作系统设置的影响。

我还尝试通过JavaScript注入全局样式

* { animations: none!important; transitions: none!important }

，但没有效果。

看来 Angular 是直接在元素的 .style 属性中设置相关属性（包括 !important）

我们无法访问/更改应用程序的源代码，但我们可以在页面上执行自定义 JavaScript。我理想地想要一个强大的解决方案来禁用所有过渡/动画。

Answer 1

首先你需要安装

environments

，尝试官方的角度指南：

配置特定于环境的默认值

---

此后，对于您的测试场景，您应该创建一个

environment.testing.ts

，其中将包含一个名为

noAnimations

的标志，该标志将为 true。

环境.测试.ts

export const environment = {
  production: true,
  noAnimations: true,
};

---

现在我们可以使用这个标志并简单地在两个函数之间切换。

provideAnimations（启用动画）

返回一组依赖注入提供程序以在应用程序中启用动画。请参阅动画指南以了解有关 Angular 动画的更多信息。

provideNoopAnimations（无错误地禁用动画）

返回一组依赖注入提供程序以在应用程序中启用动画。请参阅动画指南以了解有关 Angular 动画的更多信息。

---

如果您想启用独立组件，它将类似于：

import {
  provideAnimations,
  provideNoopAnimations,
} from '@angular/platform-browser/animations';
import { environment } from '../environments/environment';
...


...
bootstrapApplication(AppComponent, {
  providers: [environment.noAnimations ?  provideNoopAnimations() : provideAnimations()],
});

如果您想启用模块化，它将类似于：

import {
  provideAnimations,
  provideNoopAnimations,
} from '@angular/platform-browser/animations';
import { environment } from '../environments/environment';
...

...
@NgModule({
  imports: [
  ...
  providers: [environment.noAnimations ?  provideNoopAnimations() : provideAnimations()],
  bootstrap: [AppComponent],
})
export class AppModule {}