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

Posted 2023-03-06

【中文标题】是否可以使用纯 css 禁用 mat-tab 动画

【英文标题】：Is it possible to disable mat-tab animations with pure css

【发布时间】：2019-12-22 18:49:57

【问题描述】：

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

编辑：

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

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

【问题讨论】：

如果您描述您的实际问题会更好。也许做你正在尝试的不是最好的方法。见XY problems。

我们的 UX 团队希望从材质选项卡中删除幻灯片动画，因为他们认为无论出于何种原因它们都不合适。我们有多个项目可能会多次使用选项卡组件，因此我们想要一种方法来删除当前选项卡和未来选项卡的动画。理想情况下，我们不想告诉人们向他们的 HTML 添加（并开始添加）任何属性（他们可能会忘记这样做）。此外，这些项目有一个提供主要 css 样式的项目作为依赖项。

我们的想法是在所有项目共享的主要 css 样式表中删除这些动画。我们尝试添加以下内容，但没有成功：``` .mat-tab-body-content, .mat-tab-body, .mat-tab-body-wrapper transition: none !important;变换：无！重要；动画持续时间：0 毫秒！重要； ```

请在您的问题中提供新信息。

【参考方案1】：

为了在内容更改之间禁用动画，我使用了@me-sa 解决方案：

<div [@.disabled]="true">
  <mat-tab-group >
    <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>
</div>

成功了，谢谢！

至于垫标签边框动画，这对我有用：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
  /* IE10+ CSS styles go here */
    .mat-tab-group *
        transition: none!important;
        transition-duration: 0ms!important;
        transition-delay: 0ms!important;
    


@supports (-ms-accelerator:true) 
  /* IE Edge 12+ CSS styles go here */ 
  .mat-tab-group *
    transition: none!important;
    transition-duration: 0ms!important;
    transition-delay: 0ms!important;
  

【参考方案2】：

您也可以使用以下代码禁用动画：

<div [@.disabled]="true">
  <mat-tab-group >
    <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>
</div>

https://stackblitz.com/edit/angular-ns4vi5?file=app%2Ftab-group-basic-example.html

【讨论】：

不错。这有助于在内容更改之间禁用动画。但对标签底部边框动画不起作用..

【参考方案3】：

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

<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

app.module.ts

import  MAT_TABS_CONFIG  from '@angular/material';

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

【讨论】：

嗨迪诺，感谢您的回复。有与此等效的 CSS 吗？

@cfr 不是官方的。为了用 CSS 实现它，你必须做一些肮脏的 hack。如果有官方解决方案可以解决您的问题，为什么还要使用 CSS 解决方案？

我正在尝试删除大型项目中使用的每个选项卡组的动画，而无需创建自定义组件或告诉每个人向其 html 添加某个属性。这个项目使用了一个主 css 样式表，我发现我可以用它来实现这个：/

@cfr 对此有更好的官方解决方案。检查我的编辑

我尝试了你的建议，但它不起作用，它给我一个错误，说“MAT_TABS_CONFIG”没有任何导出的成员，我正在使用 angular 5