6

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; 
}
cfr
  • 135
  • 1
  • 1
  • 9
  • It would be better if you described your actual problem. Maybe doing what you're attempting isn't the best approach. See [XY problems](http://xyproblem.info/). – isherwood Aug 16 '19 at 13:13
  • 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. – cfr Aug 16 '19 at 17:26
  • 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; } ``` – cfr Aug 16 '19 at 17:30
  • New information goes in your question, please. – isherwood Aug 16 '19 at 17:30

4 Answers4

27

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' } }
  ]
})
Dino
  • 7,779
  • 12
  • 46
  • 85
  • Hi Dino, thanks for the response. Is there a CSS equivalent to this? – cfr Aug 16 '19 at 12:48
  • @cfr Not officially. You would have to do some dirty hacks in order to achieve it with CSS. Why do you want to use CSS solution if there's an official solution that covers your problem? – Dino Aug 16 '19 at 12:53
  • I'm trying to remove the animation for every tab group used within a big project, without having to create a custom component or to tell everyone to add a certain attribute to their html. This project uses a main css stylesheet that I figured out I could use to achieve this :/ – cfr Aug 16 '19 at 12:57
  • @cfr There's a better and official solution for this. Check my edit – Dino Aug 16 '19 at 13:11
  • I tried what you suggest and it doesn't work, it gives me an error that says "MAT_TABS_CONFIG" doesn't have any exported members, I'm using angular 5 – ararb78 Jan 27 '20 at 09:32
  • @ararb78 I might be wrong but I think that `MAT_TABS_CONFIG` was added with Angular Material 7. You could check in the source code to see if it's there. – Dino Jan 27 '20 at 10:10
  • @Dino, Im using @angular/material@5.0.0-rc0 in muy proyect, What could you do instead?, Im using mat-tab-group and the jump between tabs takes a long time in internet explorer – ararb78 Jan 27 '20 at 10:45
  • 1
    MAT_TABS_CONFIG is included in '@angular/material/tabs' just add tabs at the end of the library path – xzegga Sep 28 '21 at 23:34
10

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;
  }
}
letie
  • 704
  • 2
  • 10
  • 20
2

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

Me Sa
  • 1,036
  • 12
  • 14
  • Nice. This one helps disabling animation in between content change. But doesn't do the trick for the tabs bottom border animation.. – letie Jan 27 '20 at 18:49
0

Use @.disabled binding will partly work and only disable the content slide animation (for now; which is what you expect right now).

See here: https://stackblitz.com/edit/angular-ns4vi5?file=app/tab-group-basic-example.html

Sagar M
  • 1,168
  • 13
  • 10