Smooth transitions when an element is reparented?

[haberman]

Is there any good way to create a smooth transition when an element is reparented (which suddenly changes its base location)?

My use case is basically the same as your "draggable list" demo, except in my case the divs are inside table cells. When the list is reordered, I reparent the draggable <div> elements into a new table cell representing the new order. I do this because there are other table cells next to the draggable ones that update based on what table cells are dragged where.

When this reparenting happens, the <div> would naturally "jump" directly into its new row. I want this jump to be smooth. Say the element used to be in row 1 and now it's in row 2. To smoothly animate this, I need to suddenly subtract 100px from whatever its y transform is currently set to, and I want a smooth animation back to 0.

Any suggestions for this?

[SleepWalker]

You should begin transitions after reparenting div. So on first render in new parent your div should have transform with 100px substracted and than on e.g. componentDidUpdate you can check component's state and if it has non-zero transform, set the flag in state, that will start transition to zero.

This also can be done before reparenting. But in that case you should somehow detect animation end. This feature is not available in react-motion at the moment.

[haberman]

I don't think what you're describing will work. If the element was already in motion when the reparenting happened, then the transition shouldn't start from -100px, it should maybe start from -150px or -50px (depending on where it was in the previous motion) so that the element doesn't "jump" when the reparenting happens.

What I need is a way to suddenly add or subtract a number from the spring's current value, but keep it animating smoothly along its current path.

[SleepWalker]

That will work, but it depends from implementation details of your grid and UI. Here is two more alternatives:

• You should not reparent your component till animation ends :D This an opposite to what I've suggested to you in my first post.
• There is also another solution. You should set position: absolute;top: 0;left: 0; to all the grid items and position:relative to their common parent (like in draggable list or draggable balls demo). It will make transform values to be absolute and it will allow reparenting, because transform values will be relative to the parent.

All this variants should play nice with spring, because there will not be any sudden value changes. The last variant is the most flexible, but requires more coding.

[sompylasar]

Food for thought: https://aerotwist.com/blog/flip-your-animations/