是否可以使用纯CSS禁用Mat-tab动画 [英] Is it possible to disable mat-tab animations with pure css

问题描述

我想禁用"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.

我们的用户体验团队希望从材料选项卡中删除幻灯片动画，因为他们认为出于任何原因它们都不适合.我们有多个项目可能会多次使用tabs组件，因此我们希望有一种方法可以删除当前选项卡和以后使用的动画.理想情况下，我们不想告诉人们向其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动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！