用于将元素从一个父元素移动到另一个父元素的反应动画

问题描述

我正在尝试创建一个动画，用于使用 React 将子元素从一个父元素移动到另一个父元素。

用户应该能够点击一个元素并看到它移动到另一个 div 中。

我制作了一个简单的演示组件（没有动画）来展示我的意思。 单击元素时，状态会更新，元素会在正确的位置重新呈现。

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 演示： ://codepen.io/ee92/pen/LqrBjL editors 0010

非常感谢并提前感谢有关如何实现此 div-to-div 动画的任何帮助或建议。