[Tabs] Add ability to disable animations

[alexciesielski]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

I would like to disable the slide-in animation

What is the current behavior?

The slide-in animation cannot be disabled.

What is the use-case or motivation for changing an existing behavior?

I have a couple of tabs, which are rendered using *ngFor.

The data is retrieved from ngrx/store and upon any change of state, the tabs get rerendered and slide-in again, which sucks for UX.

Which versions of Angular, Material, OS, browsers are affected?

@angular/material: 2.0.0-beta.1

[fxck]

Have you tried adding trackBy to that *ngFor?

[alexciesielski]

Yes but it works only partially.

I have a nested md-tab-group (one inside the other) and the trackBy helps on the parent md-tab-group.
The inner tab-group still gets rerendered on every change.

[fxck]

Even if you put trackBy on both?

[alexciesielski]

Yes, even with two trackBys

<md-tab-group>
    <md-tab [label]="group.name" *ngFor="let group of groups | async; trackBy group?.id">

        <md-tab-group>
            <md-tab [label]="table.name" *ngFor="let table of group.tables; trackBy table?.id">

                <!-- ... -->

            </md-tab>
        </md-tab-group>

    </md-tab>
</md-tab-group>

I work with ngrx and the table gets rebuilt and sorted on every change, will have to rethink my data structure.

In the meantime it would just be easier to disable the animation though.

[alexciesielski]

Ok my bad, I have been googling trackBy a little more and I implemented it incorrectly.
I've changed the group?.id to trackByFn and in my controller I have:

trackByFn(index, item) { return item.id; }

The tabs don't get rerendered anymore, thanks.

[mateuszwitkowski]

Anyone knows how can I turn those animations off? I have "heavy" content inside tabs . It is fetched (and need to be fetched) from backend one every switch between tabs. Without animations it worked well but now it jam and freeze. I thought I could overrie CSS styles but it's defined inside Component decorator in tab-body.

[BrunnerLivio]

My workaround for this, for AngularJS:

<md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex">
    <md-tab label="one"></md-tab>
    <md-tab label="two"></md-tab>
    <md-tab label="three"></md-tab>
</md-tabs>
<section ng-if="selectedIndex === 0">ONE</section>
<section ng-if="selectedIndex === 1">TWO</section>
<section ng-if="selectedIndex === 2">THREE</section>

[sharpevo]

@BrunnerLivio Awesome, I made some changes for the new version:

<md-tab-group [(selectedIndex)]="selectedIndex">
    <md-tab label="one"></md-tab>
    <md-tab label="two"></md-tab>
    <md-tab label="three"></md-tab>
</md-tab-group>
<section *ngIf="selectedIndex === 0">ONE</section>
<section *ngIf="selectedIndex === 1">TWO</section>
<section *ngIf="selectedIndex === 2">THREE</section>

[MikeInSwitzerland]

Yup, it's a bit bizarre that this option wasn't provided. It looks great the first time you see the animation, but soon drives you mad...

[m98]

@jelbourn
Any progress on this feature request? I don't mean trick, something like animation="false"

[VasilenkoAlex]

+1.
I encountered need for animation switch when i tried to put element with fixed position into md-tab-body. In latest chrome fixed position will not work if any of parent elements have transform CSS property.

[lokeshdaiya]

@mateuszwitkowski @jelbourn You can disable animation using @.disabled property which is introduced in angular 4.3.1.

just add code to your component

@Hostbinding('@.disabled') disabled = true

or in your html

<div [@.disabled]="expression"></div>

Here is working plnkr https://plnkr.co/edit/sVJM8H?p=preview

[m98]

Thanks @lokeshdaiya
@.disabled works as expected for me! But actually I don't understand how does it work 🤔

Because the tab buttons still have animations, but the tab content animation disabled as well!

I wonder if there is any performance concern for using @.disabled!

[rich4756]

[@.disabled]="true" works nicely for me as well. Can someone explain how this works?

[andrewseguin]

The tabs use the Angular animations framework for its animations. By using @.disabled, you are telling the framework not to perform animations for the tabs, which is as performant as you can get.

[tw3]

We should point out that certain components fail to work if you disable animation using the @.disabled property. E.g. the mat-sidenav component stops working:

https://stackblitz.com/edit/angular-material2-sidenav-disable-animation-issue

Issue: #7053

[tarasbobak]

I'm facing issues with this approach. When I set [@.disabled]="true" for mat-tab-group and have a nested tab-group inside it disables animation for both, while I want only for the parent. Animation is also disabled for the expansion panel inside the second md-tab-group.
It look like I'll have to use the previously stated ngIf approach.

[MigCoder]

[@.disabled]="true" works for components like tabs, but not works for Select component, any ideas?

[gotstu]

+1 works for me and now have a new thing to learn in [@.disabled]="true". Thanks

[finalxcode]

cool

[zijianhuang]

lokeshdaiya had suggested a good solution. However, this feature should not be closed, because mat-tab-nav-bar + mat-tab-link does not have the sliding animation. It makes sense that matTab and matLink are consistent with or without sliding animation effect. Please reopen this feature request.

[dhniels]

@aldo-roman has a good solution. It'd be nice to have a global and/or component level setting to disable all of material's animations. +1 for this feature, or a way to do this easily.

[functionportal]

[@.disabled] is not a valid solution. Using [@.disabled] on mat-tab-group disabled all animations inside tabs.

[dhniels]

im unable to get [@.disabled]="true" working on mat-menu items. seems like this solution only works on certain elements...

[arsyed04]

Any update on disabling animations in tabs?

[androidovshchik]

Another approach is a hackie with route navigation

this.router.routeReuseStrategy.shouldReuseRoute = function() {
    return false;
};
this.router.navigate(['your-page', nextTabIndex]);

This will be same as *ngIf condition but also it's important to define a route param, e.g. :tab

{
   path: 'your-path/:tab',
   component: YourComponent
}

And of corse you should use <route-outlet></route-outlet>

And also it'll be nice to restore current tab on page reload

tab: number = 0;

constructor(public router: Router, public route: ActivatedRoute) {}

ngOnInit() {
    this.tab = this.route.snapshot.params['tab'];
}

And in html

<mat-tab-group [selectedIndex]="tab"/>

[simeyla]

I just find this astonishingly obtuse.

The property disableRipple is all over the place, so how hard is it to just add disableTabSlide or something similar. It's a very nice effect sometimes, but some types of content just look awful and confusing with a slide animation.

Something so simple and obviously sought after shouldn't take a year and a half of discussion :-(

[mstawick]

If using the [@.disabled] workaround, is there a way to re-enable animations for components inside tabs? I've tried adding [@.disabled]="false" inside, but to no avail.

[babeal]

I am going to second this as well. On large full page tabs, the animation is pretty poor. We should have the ability to turn them off explicitly or even better to assign animations and transitions to use with a noop animation to turn them off.

[CodySchrank]

Got sick of looking at those animations. Hopefully this is enough.

[wynhou]

Please add a toggle to disable animations, we deal with massive pages and having the entire page scroll either slows down the animation or makes it absolutely unusable.

Using disabled = true doesn't work as it disables all animation inside the tab.

Huge defect in my opinion.

[stephengardner]

Still an open issue. Please re-open

[CodySchrank]

I tried to write a PR for this a couple months ago, honestly this issue isn't going to be resolved unless the mat-tab is rewritten from the ground up. It was designed only with the animations in mind, and unfortunately angular doesn't provide a way to disable animations for one component without it propagating down to other ones.

[simeyla]

@CodySchrank Thanks for the additional info. Helpful for some insight into the implementation, it's always easy for us on the outside to assume something is super easy when it isn't.

With that said it's not that we want to DISABLE an animation using angular's funky [@.disabled] notation - it's that we just don't want the animation there in the first place. Surely that can't be so difficult. The tab isn't animating itself of its own free will - there's code there to do it!

In fact - here I just fixed it in 30 seconds. This is all people are asking for :

@Input('disableSlideEffect') disableSlideEffect: boolean;

<div class="mat-tab-body-content" #content
     [@translateTab]="disableSlideEffect ? null : _position"             <-- one simple change
     (@translateTab.start)="_onTranslateTabStarted($event)"
     (@translateTab.done)="_onTranslateTabComplete($event)">
  <ng-template matTabBodyHost></ng-template>
</div>

I really don't want to duplicate the whole mat-tab control just to make this change. I have one tab control where people would routinely tab back and forth between two 'screens' and it's just a disaster for it to be animated. Still hoping for a change before I have to release it though. But what to say to my boss when he says 'make it not slide'. That's a days worth of work.... :-/

Really hope you can help make this happen :-) Thanks

Oh and I don't think anyone is ever complaining about the other animations - like the way them tab headers move - that's very cool - it's just this one.

[andrei-ilyukovich]

@simeyla unfortunately your example doesn't work properly. Setting to null [@translateTab] property completely turns off animation and no more @translateTab.start and @translateTab.done events are fired. But it is bad as component code make some computation based on these events.

[mik01aj]

See issue #13428 and PR #13505. The option is already there. This bug can be closed.

[babeal]

Ugh we just duplicated the material tab and remove animations :(.

[leopardy]

What are valid values for animationDuration? I was trying to have no animation happen.

I used <mat-tab-group mat-stretch-tabs [animationDuration]="0" id="tab-group">

and received error

Unable to process animations due to the following failed trigger transitions
 @translateTab has failed due to:

- The provided timing value "0 cubic-bezier(0.35, 0, 0.25, 1)" is invalid.

I thought maybe I needed '0ms' but then I received Parser Error: Unexpected token 'ms' at column 2 in [0ms]

[leopardy]

What are valid values for animationDuration? I was trying to have no animation happen.

I used <mat-tab-group mat-stretch-tabs [animationDuration]="0" id="tab-group">

and received error

Unable to process animations due to the following failed trigger transitions
 @translateTab has failed due to:

- The provided timing value "0 cubic-bezier(0.35, 0, 0.25, 1)" is invalid.

I thought maybe I needed '0ms' but then I received Parser Error: Unexpected token 'ms' at column 2 in [0ms]

facepalm. I was just missing using both quotes . This worked [animationDuration]="'0ms'"

[zijianhuang]

<mat-tab-group animationDuration="0"> should fix the problem. This case can be closed now.

@leopardy, animationDuration is a string property, you should use what I had illustrated above, or
use [animationDuration]="'0ms'" that you had found.

Since you just want to disable animation, the first form with a string constant is simpler thus preferred.

animationDuration was released with #13428, however, not documented in the changelog somehow, until v7.3 while I am using 7.2.1.

[jelbourn]

This was done a while back

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}