bug(material/tabs): ink bar animation not disabling when animationDuration set to 0

[midgleyc]

Feature Description

I can set the animation duration for the tabs themselves using animationDuration on the mat-tab-group. If I set this to 0, the tabs switch instantly, but the ink bar moves across taking 500ms, which makes the tab switching look slower than it actually is.

I can implement this myself using ng-deep:

::ng-deep .mat-ink-bar {                                                                             
  transition: none !important;                                                                       
}

but ng-deep is deprecated, so there's always the risk this will stop working in the future.

Use Case

Tab switching looks faster if tab switch animation duration is less than 500ms.

[synopss]

Is this really a bug ? animationDuration is used to set the body animation speed, not the mat-ink-bar one.

So if you give it the value 0 or 0ms, the body will appear with no animation, but the mat-ink-bar will still have one.

To me, it looks like two very different things. I don't think the mat-ink-bar animation is supposed to follow the body one.

Also, removing the animation can be done by adding the _mat-animation-noop css property to the mat-ink-bar.

[yndue736]

Yes this is great and you can now check some information about it here on modern christening cakes where they have used it in a different shape.

[markusingvarsson]

I would be eager to attempt to solve this issue!

[mmalerba]

@markusingvarsson did you manage to get a PR up for this? I'd be happy to take a look

[Gua00va]

Hey!! Is this issue still open. I would like to work on this.

[zarend]

Hi @Gua00va , Yes. You are welcome to work on this. Community PRs are encouraged.

-Zach

[piyushsrvastava]

import { MatTabGroup } from '@angular/material/tabs';

@Component({ // component metadata }) export class MyComponent { @ViewChild(MatTabGroup) tabGroup: MatTabGroup;

handleAnimationChange(event: AnimationEvent) { if (event.toState === 'center') { this.tabGroup._inkBar.animationDuration = '500ms'; // set ink bar animation duration to 500ms } else { this.tabGroup._inkBar.animationDuration = '0ms'; // set ink bar animation duration to 0ms } } }

[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.}