Can we have option to disable animation in some components?

[hieuhlc]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

It would be great if we have option to disable animation or at least customize them in some components such as Tree or Modal.

What does the proposed API look like?

For example Tree component with prop animation={false} will render the tree without CSSMotion component wrapped around it

[zombieJ]

Hi, what's the background on don't want the animation?

[hieuhlc]

@zombieJ my Tree component have hundreds of item and I don't want to have animation to cost performance of the tree on expand / collapse (this is main reason). Also when the tree expands, it overflows the container's height, which is fine, but the scrollbar keeps changing during the animation. You can see the gif below

^ This is minor, not very important.
Thanks for the good work on antd btw.

[zombieJ]

Since animation works close with component, make it configurable may not easy at the moment. We may need social Volunteer to help on this.

[muzea]

Is it acceptable to add ‘disable animation’ option to ConfigProvider?

[zombieJ]

@muzea, I'm OK with it.

[muzea]

Is there any good way to measure how much performance will improve after removing the animation? Is there any indicator for the user to measure whether it is worthwhile to remove the animation?

[zombieJ]

For above example. The best way is to support virtual list which has been planed in v4.

[kaiyoma]

Has there been any work done in this area? Or is there another issue that better tracks the discussion?

I would be interested in a way to easily disable all animations/transitions on all components. The reason is that we run a lot of UI tests (using Cypress) against our app and the Ant component animations cause random errors and test failures. We would like to disable animations, but only for our tests.

[Aaronius]

It seems like setting motion={null} on the Tree component works. It's not a documented prop, but you can see where it comes into play here.

[dyram-ivoyant-eng]

You can use motion={0} when using AntD v5.x.

The original solution for motion={null} worked in AntD v4.x but did not stop animations in 5.x hence replacing null with 0 worked for me.