Components: Option to disable slide animation in mat-tab content.

[trshafer]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

Ability to disable slide in animation for tabs

What is the current behavior?

Tab content currently slides in when a new tab is selected. It would be helpful to add an input option to disable this animation

What are the steps to reproduce?

https://material.angular.io/components/tabs/examples
https://stackblitz.com/edit/angular-material2-issue-7aucx8?file=app%2Fapp.component.html

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

The tabs can be distracting for certain audiences or circumstances.

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

Angular material: 6.4.6

Is there anything else we should know?

[devversion]

Usually you can just disable all animations by using the NoopAnimationsModule, but I assume you don't want to disable all animations of the application though?

^{For the remaining tab parts which still animate with the NoopAnimationsModule applied, there is a PR pending (see https://github.com/angular/material2/pull/11395)}

[kekraft]

In this case, we want to disable just the slide animation.

[GitSage]

@DevVersion Using NoopAnimationsModule can be a problem sometimes, e.g. if you want to conditionally disable animations during runtime, or if you can't deploy a second animation-free build.

Do you know if that PR will make the @.disabled binding correctly disable the animation?

[devversion]

@kekraft @GitSage That makes sense. Using @.disabled binding will partly work and only disable the content slide animation (for now; which is what you expect right now).

My plan is to also disable animations for the inkbar etc. if @.disabled is specified.

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

[patoncrispy]

The problem with @.disabled is that it disables animations for all child components too. I currently have an expansion panel underneath a tab and I need the animation for that but not the tab. Any way to solve that conundrum?

[GitSage]

@patoncrispy The documentation has this to say:

Overriding disablement of inner animations 
Despite inner animations being disabled, a parent animation can query() for inner elements located in disabled areas of the template and still animate them if needed. This is also the case for when a sub animation is queried by a parent and then later animated using animateChild().

Alternatively, you could try setting @.disabled="true" on a parent and then setting @disabled="false" on the child. I'm not sure if that would work though. I haven't checked that myself yet though.

[patoncrispy]

@GitSage ".disabled="false" doesn't work. Also, I think to use animateChild requires you to know the animation triggered. Also, that shouldn't be a solution. As mentioned before, it should be simple enough to add a property to disable animations on components without having to hack away.

[fookensoul]

I've been looking at this as well. There is no option to disable the sliding in animation. I've worked around it by hooking into the start and stop events. What makes it worse is that the actual site uses a better tab transition than any in the api.

[stagefright5]

@fookensoul , can you share a bit more detail about your workaround?

[mik01aj]

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

[crisbeto]

Closing since the option for controlling the animation duration is in master.

[Alex-Torres]

Hey @crisbeto the animationDuration is not yet available for Tabs on 7.04 right?

[crisbeto]

It should be in 7.1.0.

[Alex-Torres]

Nice! Thank you @crisbeto.

[angular-automatic-lock-bot[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._}