Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
midgleyc opened this issue Jun 13, 2022 · 8 comments · Fixed by #27056 · May be fixed by #25617
Closed

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

midgleyc opened this issue Jun 13, 2022 · 8 comments · Fixed by #27056 · May be fixed by #25617
Labels
area: material/tabs good first issue This issue is a good place to start for first time contributors to the project P4 A relatively minor issue that is not relevant to core functions

Comments

@midgleyc
Copy link

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.
@midgleyc midgleyc added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Jun 13, 2022
@wagnermaciel wagnermaciel changed the title feat(material/tabs): Allow disabling animation for ink bar bug(material/tabs): ink bar animation not disabling when animationDuration set to 0 Jun 17, 2022
@wagnermaciel wagnermaciel added P4 A relatively minor issue that is not relevant to core functions good first issue This issue is a good place to start for first time contributors to the project area: material/tabs and removed feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Jun 17, 2022
@synopss
Copy link

synopss commented Jun 25, 2022

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

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
Copy link
Contributor

I would be eager to attempt to solve this issue!

@mmalerba
Copy link
Contributor

mmalerba commented Sep 9, 2022

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

markusingvarsson added a commit to markusingvarsson/components that referenced this issue Sep 9, 2022
@markusingvarsson
feat(material/tabs): The animation of the ink bar of the mat tab grou…
bb66ac7 
…p and the mat tab nav bar is now synchronized with the animationDuration of the tab body.

When the animation duration of the tab body was set to e.g. 0ms the ink bar still had an animation of 500ms. The following feat extends the animationDuration property to not only affect the tab body but also the ink bar of the tab group and the tab nav bar.

Fixes angular#25068
@markusingvarsson markusingvarsson mentioned this issue Sep 9, 2022
Open
markusingvarsson added a commit to markusingvarsson/components that referenced this issue Sep 9, 2022
@markusingvarsson
feat(material/tabs): The animation of the ink bar of the mat tab grou…
69b8db7 
…p and the mat tab nav bar is now synchronized with the animationDuration of the tab body.

When the animation duration of the tab body was set to e.g. 0ms the ink bar still had an animation of 500ms. The following feat extends the animationDuration property to not only affect the tab body but also the ink bar of the tab group and the tab nav bar.

Fixes angular#25068
markusingvarsson added a commit to markusingvarsson/components that referenced this issue Sep 13, 2022
@markusingvarsson
fix(material/tabs):del unnecessary code for angular#25068 fix
3f69d47 
Removed unnecessary code of a unit test that was added to test the ink bar animation synchronization with tab body, the PR that was intended to solve angular#25068.

Fixes angular#25617
markusingvarsson added a commit to markusingvarsson/components that referenced this issue Sep 13, 2022
@markusingvarsson
feat(material/tabs): The animation of the ink bar of the mat tab grou…
68ab595 
…p and the mat tab nav bar is now synchronized with the animationDuration of the tab body.

When the animation duration of the tab body was set to e.g. 0ms the ink bar still had an animation of 500ms. The following feat extends the animationDuration property to not only affect the tab body but also the ink bar of the tab group and the tab nav bar.

Fixes angular#25068
markusingvarsson added a commit to markusingvarsson/components that referenced this issue Sep 13, 2022
@markusingvarsson
feat(material/tabs): The animation of the ink bar of the mat tab grou…
8b1d98f 
…p and the mat tab nav bar is now synchronized with the animationDuration of the tab body.

When the animation duration of the tab body was set to e.g. 0ms the ink bar still had an animation of 500ms. The following feat extends the animationDuration property to not only affect the tab body but also the ink bar of the tab group and the tab nav bar.

Fixes angular#25068
markusingvarsson added a commit to markusingvarsson/components that referenced this issue Sep 14, 2022
@markusingvarsson
fix(material/tabs): fix ci conflict originating from angular#25068 fix
4df8eec 
--
markusingvarsson added a commit to markusingvarsson/components that referenced this issue Sep 14, 2022
@markusingvarsson
feat(material/tabs): The animation of the ink bar of the mat tab grou…
3c81513 
…p and the mat tab nav bar is now synchronized with the animationDuration of the tab body.

When the animation duration of the tab body was set to e.g. 0ms the ink bar still had an animation of 500ms. The following feat extends the animationDuration property to not only affect the tab body but also the ink bar of the tab group and the tab nav bar.

Fixes angular#25068
markusingvarsson added a commit to markusingvarsson/components that referenced this issue Sep 14, 2022
@markusingvarsson
fix(material/tabs):del unnecessary code for angular#25068 fix
82dfbb5 
Removed unnecessary code of a unit test that was added to test the ink bar animation synchronization with tab body, the PR that was intended to solve angular#25068.

Fixes angular#25617
markusingvarsson added a commit to markusingvarsson/components that referenced this issue Sep 14, 2022
@markusingvarsson
fix(material/tabs): rename commit to pass ci
fc397a8 
fix merge issues involving fix of angular#25068
@Gua00va
Copy link

Gua00va commented Feb 15, 2023

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

@zarend
Copy link
Contributor

zarend commented Feb 16, 2023

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

-Zach

@piyushsrvastava
Copy link

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

markusingvarsson added a commit to markusingvarsson/components that referenced this issue May 7, 2023
@markusingvarsson
feat(material/tabs): ink bar animation synchronize
62d4853 
The animation of the ink bar of the mat tab group and the mat tab nav bar is now synchronized with the animationDuration of the tab body.
When the animation duration of the tab body was set to e.g. 0ms the ink bar still had an animation of 500ms. The following feat extends the animationDuration property to not only affect the tab body but also the ink bar of the tab group and the tab nav bar.

Fixes angular#25068
markusingvarsson added a commit to markusingvarsson/components that referenced this issue May 7, 2023
@markusingvarsson
feat(material/tabs): ink bar animation synchronize
a4e1992 
The animation of the ink bar of the mat tab group and the mat tab nav bar is now synchronized with the animationDuration of the tab body.
When the animation duration of the tab body was set to e.g. 0ms the ink bar still had an animation of 500ms. The following feat extends the animationDuration property to not only affect the tab body but also the ink bar of the tab group and the tab nav bar.

Fixes angular#25068
markusingvarsson added a commit to markusingvarsson/components that referenced this issue May 7, 2023
@markusingvarsson
feat(material/tabs): ink bar animation synchronize
1c89a26 
The animation of the ink bar of the mat tab group and the mat tab nav bar is now synchronized with the animationDuration of the tab body.
When the animation duration of the tab body was set to e.g. 0ms the ink bar still had an animation of 500ms. The following feat extends the animationDuration property to not only affect the tab body but also the ink bar of the tab group and the tab nav bar.

Fixes angular#25068
@markusingvarsson markusingvarsson mentioned this issue May 7, 2023
Merged
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: material/tabs good first issue This issue is a good place to start for first time contributors to the project P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
9 participants
@zarend @mmalerba @synopss @markusingvarsson @wagnermaciel @midgleyc @Gua00va @yndue736 @piyushsrvastava