search

minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
495 stars 69 forks source link

Custom animation for expanding nodes #214

Open piszczu4 opened 8 months ago

piszczu4 commented 8 months ago

Hi, looking at the demo (https://minop1205.github.io/react-dnd-treeview/?path=/docs/basic-examples-animateexpand--animate-expand-story) I'm very impressed but I'm wondering whether it's possible to use custom animation of expanding node? If yes, how can we do that?

minop1205 commented 8 months ago

@piszczu4 In the current version, there is no API to control the animation, so it is not possible to customize the animation.

piszczu4 commented 8 months ago

@piszczu4 In the current version, there is no API to control the animation, so it is not possible to customize the animation.

@minop1205 What a pity :( I'd like to obtain an effect like here on both closing and opening. If we can animate height, shouldn't it be relatively easy to apply any other animation? I would need to have a look on the source code (I'm really beginner in React) but for now I noticed that you are using framer-motion in AnimateHeight.tsx so maybe there some updates would be helpful. I tried to animate it using react-spring and custom Node but I manage to do it only for opening, closing doesnt work. Here is my code, I would appreciate your feedback whether there are plans to somehow update the code to handle custom animations and whether it is possible to animate "closing" of a node using CustomNode or again its not possible. Animation is really the last missing part from my point of view.

minop1205 commented 8 months ago

@piszczu4 The animation is still applied when the node is closed. The animation shown in the capture below is the correct behavior, but it does not appear this way?

https://github.com/minop1205/react-dnd-treeview/assets/3772820/c23551b3-362f-4b6e-ab51-64f95058023f

piszczu4 commented 8 months ago

I mean yes it works fine in this example from the story book but I wanted to change the animation so that instead animating the height and opacity change as hardcoded in AnimateHeight.tsx, I'd like to animate the opacity and transform from translate3d(${20}px,0,0) to translate3d(${0}px,0,0) when opening and vice-versa when the node is closed.