question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Tabs] Add ability to disable animations

See original GitHub issue

Bug, 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:closed
  • Created 7 years ago
  • Reactions:44
  • Comments:44 (4 by maintainers)

github_iconTop GitHub Comments

40reactions
mateuszwitkowskicommented, Feb 17, 2017

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.

33reactions
lokeshdaiyacommented, Jul 28, 2017

@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

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found