CODEWITHSUNDEEP
angularangular-material
Brian
Brian

Reputation: 145

how do I disable all angular animations except 1?

I have an angular 9 app that makes significant use of mat-tab-group. I want to disable all animations related to switching tabs, as well as the transitions that occur with the stepper (which seems it may be just an extension of the tab view).

However, Im using an accordion view where I would like to have animations enabled. It seems that when I declare @HostBinding('@.disabled') on a component, all sub components have disabled animations. The problem Im having is that the accordion view is a subcomponent within a tab view that I wish to not animate. Is there a way to "white list" components to be animated?

Upvotes: 1

Views: 481

Answers (1)

Edric
Edric

Reputation: 26801

For the tabs component, you can make use of the animationDuration input.

From the documentation:

You can control the duration of the tabs' animation using the animationDuration input. If you want to disable the animation completely, you can do so by setting the properties to 0ms.

(Emphasis is mine)

Here's an example, taken directly from the same documentation:

<mat-tab-group animationDuration="0ms">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

As for the other components, AFAIK there's no easy way of disabling animations that I can think of without disabling other animations inside of the components.

Upvotes: 2

Related Questions