React animation for moving an element from one parent to another

Question

I am trying to create an animation for moving a child element from one parent element to another using React.

A user should be able to click on an element and see it move into another div.

I made a simple demo component (without the animation) to show what I mean. When an element is clicked, the state updates and the elements are re-rendered in the correct place.

class App extends React.Component {

  state = {
    list: ['Alice', 'Bob', 'Charlie', 'David', 'Emily', 'Frank'],
    top: [0, 1, 2],
    bottom: [3, 4, 5]
  }

  moveDown = (item) => {
    let { top, bottom } = this.state
    this.setState({
      top: top.filter(x => x !== item),
      bottom: [...bottom, item]
    })
  }

  moveUp = (item) => {
    let { top, bottom } = this.state
    this.setState({
      top: [...top, item],
      bottom: bottom.filter(x => x !== item)
    })
  }

  render() {
    let { top, bottom, list } = this.state
    return (
      <div style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          alignItems: 'center',
          height: '90vh',
          width: '100%'
        }}>
        <div>
          {top.map((item) =>
            <div
              onClick={() => this.moveDown(item)}
              style={{color:'red'}}>{list[item]}</div>
          )}
        </div>
        <div>
          {bottom.map((item) =>
            <div
              onClick={() => this.moveUp(item)}
              style={{color:'green'}}>{list[item]}</div>
          )}
        </div>
      </div>
    )
  }
}

Codepen demo: https://codepen.io/ee92/pen/LqrBjL?editors=0010

Big appreciation to and thanks in advance for any help or advice on how to achieve this div-to-div animation.

Answer 1

No it's not possible

It's not possible to animate in that way because the DOM thinks you're removing a div and then adding a new div. Even though it's the same div to you, the DOM doesn't have that context. Animations are controlled by changes to CSS, not HTML.

...but here's how to do it

If you actually need both lists to stay in different divs the best you can do is either:

1. Animate the old item to the new item position, then delete the old item and show the new item.
2. Remove the old item and create a new item where the old item was and move it to the new item position.

Same concept, two ways of doing it.

I modified your existing sample to show a simplified version of option 2. Note that there are a number of animation decisions to make like what happens when the list gets smaller, how should the items change from red to green, etc., and I didn't try and objectively solve them. Also, this would be much easier if you could have all the items for both lists in one div, and control their positions absolutely. But if they need to end up in separate divs...

https://codepen.io/sallf/pen/VgBwQr?editors=0010

What's going on

1. Adding a transition to .item we can make the animation happen when we make adjustments to the transform property.
2. On item click we update our lists in state and add...
3. transition.item to know which item is animating...
4. transition.startTop to know the offset y position the item should start at relative to the bottom of the list it's moving to, and...
5. transition.startAnim as a flag to control the animation.
6. Since transitions need something to change before they'll animate, we use setTimeout to delay the change of transition.startAnim which basically causes the animation from the computed position, back to 0.