如何在独立应用程序中全局禁用基于媒体查询的Angular 动画

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppRootComponent],
  imports: [
    BrowserAnimationsModule.withConfig({
      disableAnimations: window.matchMedia("(prefers-reduced-motion)").matches, // <-
    }),
    // ...
  ],
})
export class AppModule {}

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
    // ...
  ]
});

const disableAnimations: boolean = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

bootstrapApplication(AppComponent, {
  providers: [
    !disableAnimations ? provideAnimations() : provideNoopAnimations(),
    // ...
  ]
});

Angular相关问答推荐

angular：从模板中的可观察数组获取随机元素

*ngFor循环中令人困惑的Angular 行为

更改图表上的光标以进行zoom

路由在全局导航中总是给我/甚至使用相对路径

Angular 如何观察DOM元素属性的变化？

使用`UrlHandlingStrategy`更改位置

是否可以在Angular(12+)中迭代指定的范围而不是整个数组

Nx Angular Monorepo 中 cypress 组件测试的代码覆盖率？

Angular 在关闭另一个对话框后打开另一个对话框的最佳做法是什么？

ng 生成组件不会创建 ngOnInit 和构造函数

组件的导入不能以Angular 工作

将 injectiontoken 用于 Angular 中的模块特定设置

Renderer2.appendChild 没有按预期工作？

Angular：将间隔与增量和减量相结合

使用 RxJS forkJoin 时传递参数的最佳方式

带有重定向的Angular 2 AuthGuard服务？

Angular 4.3拦截器不起作用

Angular 2 - 组件内的 formControlName

angular 5 material - 表单字段停留在 180px

如何在 Angular 中使用带有 SASS 的 Bootstrap 4