angular - 如何禁用 mat-tab-group mat-ink-bar 动画

Question

我想禁用选择动画

我设置了 animationDuration 和 disableRipple 但它仍然是动画

<mat-tab-group animationDuration="0ms" disableRipple>
        <mat-tab label="Short tab">
          <div class="mat-elevation-z4_">
            Small content
          </div>
        </mat-tab>
        <mat-tab label="Long tab">
          <div class="mat-elevation-z4_">
            Large content
          </div>
        </mat-tab>
      </mat-tab-group>

我希望它像在 docs 中一样工作

更新:

我试过 [@.disable]="true" 但没用

<mat-tab-group animationDuration="0ms" [@.disabled]="true">
        <mat-tab label="Short tab">
          <div class="mat-elevation-z4_">
            Small content
          </div>
        </mat-tab>
        <mat-tab label="Long tab">
          <div class="mat-elevation-z4_">
            Large content
          </div>
        </mat-tab>
 </mat-tab-group>

更新:

我修复该过渡的唯一方法是放置此自定义 css ::ng-deep .mat-ink-bar{ transition: none !important; }

Answer 1

animationDuration="0" 可以移除animation用于标签，但不用于墨栏

对于墨水栏，您可以使用 provider 删除动画在你的组件中

供应商:[{ provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations' }]