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

Add option to disable tab animations #13428

Closed
jelbourn opened this issue Oct 4, 2018 · 9 comments · Fixed by #13505
Closed

Add option to disable tab animations #13428

jelbourn opened this issue Oct 4, 2018 · 9 comments · Fixed by #13505
Assignees
@crisbeto
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix G This is is related to a Google internal issue P2 The issue is important to a large percentage of users, with a workaround

Comments

@jelbourn
Copy link
Member

jelbourn commented Oct 4, 2018

  • Add an @Input to mat-tab-group to disable the animation
  • Add a MAT_TABS_OPTIONS provider to configure it globally
@jelbourn jelbourn added feature This issue represents a new feature or feature request rather than a bug or bug fix P2 The issue is important to a large percentage of users, with a workaround G This is is related to a Google internal issue labels Oct 4, 2018
@crisbeto
Copy link
Member

crisbeto commented Oct 6, 2018

@jelbourn for the most part this works already with the @.disabled binding (see https://stackblitz.com/edit/angular-gyxwjs), aside from the ink bar and ripples which are CSS based. Is this new binding supposed to disable everything or just the tab body animations?

@jelbourn
Copy link
Member Author

jelbourn commented Oct 8, 2018

@crisbeto just the tab body animation. My understanding is that using @.disabled will also disable all of the animations within the tab, which users don't always want.

Another option here would be to introduce an alternate animation that looks better on desktop with very wide tab bodies (though still probably allowing disabling it).

@crisbeto
Copy link
Member

crisbeto commented Oct 8, 2018

I see. In that case it would be better to introduce an input for the animation duration so people can also speed it up/slow it down, or set it to zero.

@jelbourn
Copy link
Member Author

jelbourn commented Oct 8, 2018

That sounds good to me

@crisbeto crisbeto added the has pr label Oct 9, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 9, 2018
@crisbeto
feat(tabs): add the ability to customize the animation duration
7b71cfb 
Adds the `animationDuration` input and the `MAT_TABS_CONFIG` injection token that can be used to configure the duration of the tab animation.

Fixes angular#13428.
@crisbeto crisbeto mentioned this issue Oct 9, 2018
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 9, 2018
@crisbeto
feat(tabs): add the ability to customize the animation duration
281813c 
Adds the `animationDuration` input and the `MAT_TABS_CONFIG` injection token that can be used to configure the duration of the tab animation.

Fixes angular#13428.
mmalerba pushed a commit that referenced this issue Oct 23, 2018
@crisbeto @mmalerba
feat(tabs): add the ability to customize the animation duration (#13505)
0cd7536 
Adds the `animationDuration` input and the `MAT_TABS_CONFIG` injection token that can be used to configure the duration of the tab animation.

Fixes #13428.
This was referenced Oct 31, 2018
Closed
Closed
@leopardy
Copy link

leopardy commented Jan 8, 2019

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]

@crisbeto
Copy link
Member

crisbeto commented Jan 8, 2019

@leopardy it accepts a string. E.g. animationDuration="100ms" or [animationDuration]="'100ms'".

@leopardy
Copy link

leopardy commented Jan 8, 2019

@leopardy it accepts a string. E.g. animationDuration="100ms" or [animationDuration]="'100ms'".

@crisbeto Thank you. Yes, silly me. This worked [animationDuration]="'0ms'"

@jelbourn
Copy link
Member Author

jelbourn commented Jan 8, 2019

@crisbeto we should probably make 0 by itself work

crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 10, 2019
@crisbeto
fix(tabs): better handling of animationDuration without units
2f2addf 
Based off of the discussions on angular#13428. Handles values passed to `animationDuration` that don't have units, rather than allowing them to continue through to  the `BrowserAnimationsModule` and to throw an error.
@crisbeto crisbeto mentioned this issue Jan 10, 2019
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 10, 2019
@crisbeto
fix(tabs): better handling of animationDuration without units
f1ca702 
Based off of the discussions on angular#13428. Handles values passed to `animationDuration` that don't have units, rather than allowing them to continue through to  the `BrowserAnimationsModule` and to throw an error.
vivian-hu-zz pushed a commit that referenced this issue Jan 14, 2019
@crisbeto @vivian-hu-zz
fix(tabs): better handling of animationDuration without units (#14778)
6f49813 
Based off of the discussions on #13428. Handles values passed to `animationDuration` that don't have units, rather than allowing them to continue through to  the `BrowserAnimationsModule` and to throw an error.
s2-abdo pushed a commit to s2-abdo/material2 that referenced this issue Jan 18, 2019
@crisbeto @s2-abdo
fix(tabs): better handling of animationDuration without units (angula…
688fa60 
…r#14778)

Based off of the discussions on angular#13428. Handles values passed to `animationDuration` that don't have units, rather than allowing them to continue through to  the `BrowserAnimationsModule` and to throw an error.
s2-abdo pushed a commit to s2-abdo/material2 that referenced this issue Jan 18, 2019
@crisbeto @s2-abdo
fix(tabs): better handling of animationDuration without units (angula…
17ec29e 
…r#14778)

Based off of the discussions on angular#13428. Handles values passed to `animationDuration` that don't have units, rather than allowing them to continue through to  the `BrowserAnimationsModule` and to throw an error.
vivian-hu-zz pushed a commit that referenced this issue Jan 18, 2019
@crisbeto
fix(tabs): better handling of animationDuration without units (#14778)
30a310e 
Based off of the discussions on #13428. Handles values passed to `animationDuration` that don't have units, rather than allowing them to continue through to  the `BrowserAnimationsModule` and to throw an error.
@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 Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix G This is is related to a Google internal issue P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(tabs): add the ability to customize the animation duration crisbeto/material2
3 participants
@jelbourn @leopardy @crisbeto