Is it possible to disable mat-tab animations with pure css

Question

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.

EDIT:

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

Solution 1

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>

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' } }
  ]
})

Solution 2

For disabling animation in between content change I used @me-sa solution:

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

And worked, thanks!

As for the mat tabs border animation, this did the trick for me:

@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;
  }
}

Solution 3

also you can use this below code for disabling animation:

<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