是否可以使用纯CSS禁用Mat-tab动画

时间:2019-08-16 12:33:52

标签: css angular angular-material angular-animations mat-tab

我想禁用“ Angular Material” mat-tab动画(当内容滑入到位时出现的动画)。我知道可以使用[@ .disabled]属性,但我想知道使用纯css是否有可能达到相同的效果。

编辑:

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

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

3 个答案:

答案 0 :(得分:6)

为了在内容更改之间禁用动画,我使用了@ 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;
  }
}

答案 1 :(得分:1)

Angular Material没有提供覆盖动画的官方方法,因此除非您确实需要,否则我不会建议您这样做(您将为此做一些肮脏的修改)。查看您的情况,没有必要覆盖CSS,因为将tf.regex_replace()应用于import tensorflow as tf str = tf.constant("your string") sub_str = tf.constant("string") def not_contains(str1, str2): cut1 = tf.regex_replace(str1, str2, "") split1 = tf.string_split([cut1], "") split2 = tf.string_split([str1], "") size1 = tf.size(split1) size2 = tf.size(split2) return tf.equal(size1, size2) is_not_in = not_contains(str, sub_str) sess = tf.Session() sess.run(is_not_in) # False 可以达到相同的结果-这也是一种官方解决方案。

animationDuration

如果要对项目中的每个选项卡组全局应用更改,则必须注入mat-tab-group

app.module.ts

<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>

答案 2 :(得分:0)

您还可以使用以下代码禁用动画:

<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