是否可以使用纯 css 禁用 mat-tab 动画

问题描述：

我想禁用 Angular Material mat-tab 动画(内容滑动到位时发生的动画).我知道可以使用 [@.disabled] 属性，但我想知道是否可以使用纯 css 实现相同的效果.

I want to disable the Angular Material mat-tab animation (the animation that occurs as the content slides into place). I know it is possible to use the [@.disabled] attribute but I wonder if it is possible to achieve the same effect with pure css.

我们的 UX 团队希望从材料选项卡中删除幻灯片动画，因为他们认为无论出于何种原因都不合适.我们有多个项目可能会多次使用选项卡组件，因此我们想要一种方法来移除当前选项卡和即将出现的选项卡的动画.理想情况下，我们不想告诉人们向他们的 HTML 添加(并开始添加)任何属性(他们可能会忘记这样做).此外，这些项目有一个提供主要 css 样式的项目作为依赖项.这个想法是在所有项目之间共享的主 css 样式表中删除这些动画.我们尝试添加以下内容，但没有奏效:

Our UX team wants to remove the slide animation from the material tabs since they think they are not appropriate for whatever reason. We have multiple projects that may use multiple times the tabs component, so we wanted a way to remove this animation for the current tabs and the ones to come. Ideally, we do not want to tell people to add (and start adding) any attributes to their HTMLs (they may forget doing so). Also, these projects have as a dependency a project that provides the main css styles. The idea was to remove these animations in the main css stylesheet that is shared among all the projects. We tried adding the following, but it did not work:

.mat-tab-body-content, .mat-tab-body, .mat-tab-body-wrapper { 
  transition: none !important;
  transform: none !important; 
  animation-duration: 0ms !important; 
}

答

Angular Material 没有提供覆盖动画的官方方法，因此除非你真的需要它，否则我不会建议它(你将不得不做一些肮脏的黑客).看看你的情况，没有必要覆盖 CSS，因为你可以通过将 animationDuration 应用到 mat-tab-group 来获得相同的结果 - 这也将成为官方解决方案.

Angular Material doesn't provide an official way of overriding the animations, therefore I wouldn't suggest it unless you really need it (You will have to do some dirty hacks for that). Taking a look at your case, there is no point of overwriting the CSS as you can achieve the same result by applying the animationDuration to mat-tab-group - which would also be an official solution.

<mat-tab-group animationDuration="0ms">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

如果您想将更改全局应用于项目中的每个选项卡组，则必须注入 MAT_TABS_CONFIG

If you want to apply changes globally to every tab-group in your project you will have to inject MAT_TABS_CONFIG

app.module.ts

import { MAT_TABS_CONFIG } from '@angular/material';

@NgModule({
  ...
  providers: [
    { provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms' } }
  ]
})

是否可以使用纯 css 禁用 mat-tab 动画

相关推荐