[Tabs] Add ability to disable animations
See original GitHub issueBug, 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
Issue Analytics
- State:
- Created 7 years ago
- Reactions:44
- Comments:44 (4 by maintainers)
Top Results From Across the Web
Change, remove or turn off animation effects - Microsoft Support
On the Animations tab, in the Advanced Animation group, click Animation Pane. The Advanced Animation group on the Animation tab in the PowerPoint...
Read more >Is it possible to disable mat-tab animations with pure css
I want to disable the Angular Material mat-tab animation (the animation that occurs as the content slides into place). I know it is...
Read more >How to disable all chromium animations? - Super User
It'v disabled animation for list of tabs but not other ones. I'm using chromium 104.0. 5112.101 on Linux Void x86_64.
Read more >How to disable interface animations in Android 10
In the Settings app, select Accessibility from the list. Now scroll down to the Display section and select Remove Animations to set the...
Read more >Dear Wizards, please give us the ability to disable animations
823 votes, 100 comments. Dear Wizards, please give us the option to disable all animations in game, be it pets, cards, maps or...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
@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