未安装组件上的成帧器运动退出 animation

Question

I'm trying to play an animation on dismounting of my component with exit attribute, but it doesn't work despite the presence of !

The input animation works fine but not the output one !

I guess I'm mismanaging the dismounting of my description which is displayed if the props data.show is true, boolean that I change at the click on the project, in short if someone can point me...

codesandbox

Thanks in advance

Answer 1

There are quite a few issues to cover in your code and suggest you first understand what triggers re-rendering in React.

By creating a new uuid key every time you change prop data, you are breaking the ability for React to know which components need to be rendered again so it re-renders them all - so it's always a new instance on AnimatePresence and no way for AnimatePresence to know there has been a change to the key or a change in mounting. Also make use of useCallback hooks when passing in functions to child components to avoid re-renders.

Move the state up to the parent, update the card key to a consistent value between renders, and don't update the entire props data just to expand/collapse.

See the updated sandbox

I suggest that you don't animate multiple items inline within the same space like this as you will always have the remaining boxes jump a little, but that is another topic.