reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.16k stars 650 forks source link

Replacing item causes animation jank #780

Open use opened 2 years ago

use commented 2 years ago

What is the current behavior?

Replacing one item with another (exit: 0) briefly causes them to both exist, causing animation jank.

This comes up in situations where I want to animate one item out and replace it with another. For example: Swapping out a title bar, or a submenu.

What is the expected behavior?

Two items which logically shouldn't exist at the same time shouldn't be visible at the same time.

Could you provide a CodeSandbox demo reproducing the bug?

https://codesandbox.io/s/autumn-hooks-e2qpr

Click the button a couple times and you should see the "blip" where the two items stack vertically, causing the button to appear lower momentarily.

If I'm doing something wrong, please let me know.

Thank you for this wonderful and helpful library!

Echo-Lynn commented 2 years ago

same problem