Animation when internal node is opened and closed

[piszczu4]

Is it possible to add an animation when internal node is opened? Just to not show the children immidiately

Edit I manage to handle "open" case using react-spring but I cant figure out how to handle "close" case. Here is my code, https://codesandbox.io/s/usesimpletree-forked-yphp3t?file=/src/App.js

[jameskerr]

Close animations are very difficult in React. I have always wanted a way to add animation to this library. I believe there may be some opportunity with the view-transition api coming to browsers soon. But at the moment, I don't have a good answer for this.

Good luck!

[ru13r]

I achieved a similar visual effect without using additional packages or complicating things too much.

Opening and closing of a node increments / decrements the top property of all subsequent nodes. Any node element has a role of treeitem. As such I used pure CSS:

[role="treeitem"] {
  transition: top 0.05s ease-in;
}

It is not ideal, but looks fine.