0

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

Dump
  • 13
  • 1
  • 6
  • The architecture you are using will not work like this. Every time you fire off `onToggleClick` you are triggering a change in `data` prop and the component re-renders with a new instance of AnimatePresense so there is never an `exit` – Samuel Goldenbaum Mar 13 '21 at 00:41

1 Answers1

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.

Samuel Goldenbaum
  • 18,391
  • 17
  • 66
  • 104
  • 1
    Thank you very much for this clarification about UUID. I was not aware of the re-render effect in React ! That explains all the little behaviors I didn't understand concerning the output animations! Thank you very much for taking the time to answer me so quickly! – Dump Mar 13 '21 at 08:52
  • No prob, I had the same issues in the past and became clear after understanding the rendering cycle. Please remember to accept the answer if it solved your issue and will be helpful to others. – Samuel Goldenbaum Mar 13 '21 at 17:37