search

lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
944 stars 74 forks source link

Animation when node is opened and closed #290

Closed piszczu4 closed 6 months ago

piszczu4 commented 9 months ago

Is it possible to add a custom animation to the node content when its opened and closed?

lukasbach commented 9 months ago

Opening transitions should be doable fairly easily, when a subtree is opened, its content is rendered in and you should be able to just add an animation to that with CSS.

Closing animations are probably quite a bit trickier, I'm not sure if that is possible since the subtree is directly unloaded when you close the subtree, so a CSS animation is probably not working then.

Nishchit14 commented 9 months ago

Is there any quick example for the animation? I think it would help a lot to implement in tree open/close folders.

lukasbach commented 6 months ago

Since this came up in another issue, I've added a prop shouldRenderChildren to allow library consumers to also show a subtree content when it is already collapsed, to allow for rendering a collapse animation. Alongside that, I also implemented a sample implementation for expanding and collapsing animations. See Demo and Demo Implementation for details.