search

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.15k stars 650 forks source link

All nodes will be rendered when react key exists in the children of the TransitionGroup #863

Open MisterLuffy opened 1 year ago

MisterLuffy commented 1 year ago

What is the current behavior?

All nodes will be rendered when a key exists in the children of the TransitionGroup.

Just try this Demo, after the react key is removed, conditional rendering will return to normal.

Kapture 2022-10-13 at 17 07 51

What is the expected behavior?

Conditional judgment can take effect.

richardscarrott commented 1 year ago

I think this might be less about having a key and more about TransitionGroup failing to unmount children which aren't Transition / CSSTransition elements?

https://codesandbox.io/s/funny-resonance-1252uf?file=/demo.js

I was using an older version of TransitionGroup to render dialogs / tooltips / popovers etc. stacked in the order they were opened. Some of these components need to animate and therefore use Transition but many don't so they simply render regular elements.

Not sure if this is a 'feature' that could be added back; from what I can tell it was removed in v2 so quite a long time ago?