3

I wan to disable a selection animation

I set animationDuration and disableRipple but it still animated

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

enter image description here

I want it to work same as in the docs

enter image description here

UPDATE:

I've ried [@.disable]="true" but it didn't work

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

UPDATE:

the only way I fixed that transition is by placing this custom css ::ng-deep .mat-ink-bar{ transition: none !important; }

Sergino
  • 10,128
  • 30
  • 98
  • 159

2 Answers2

2

animationDuration="0" can remove animation for tabs, but not for the ink bar

for ink bar you can delete animation with the provider in your component

providers: [
{ provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations' }
]

Viktoria
  • 41
  • 1
0

Viktoria's solution is nice, but beware that it will disable ALL animations in your component. I.e. if you have a loading wheel, it won't turn anymore.

SovushkaUtrom
  • 1
  • 2