反应动画将元素从一个父对象移动到另一个父元素

Question

我正在尝试创建一个动画，以便使用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演示：https：//codepen.io/ee92/pen/LqrBjL
？ editors
=
0010

非常感谢并感谢您对如何实现此div-div动画的任何帮助或建议。

Answer 1

不，那不可能

无法以这种方式进行动画处理，因为DOM认为您要先删除a div然后再添加new
div。即使与div您相同，DOM也没有该上下文。动画是通过更改CSS（而不是HTML）来控制的。

…但是这是怎么做的

如果您实际上需要两个列表都保留在不同的divs中，那么您可以执行以下操作之一：

1. 使动画old item到该new item位置，然后删除old item并显示new item。
2. 删除old item并在原处创建一个new item，old item然后将其移动到该new item位置。

相同的概念，两种实现方式。

我修改了您现有的示例，以显示选项2 的 简化
版本。请注意，要做出许多动画决定，例如列表变小时会发生什么，项目应如何从红色变为绿色等，而我没有不要试图客观地解决它们。同样，如果您可以将item两个列表的所有s都放在一个div中并控制它们的位置，则将容易得多absolute。但是如果他们需要结束于单独div的…

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

这是怎么回事

1. 添加transition到.item我们可以让动画发生时，我们作出调整transform财产。
2. 点击项目后，我们会更新状态列表并添加…
3. transition.item 知道哪个项目正在制作动画…
4. transition.startTop知道y项目应相对于要移动的列表底部的偏移位置，并…
5. transition.startAnim 作为控制动画的标志。
6. 由于transitions需要先进行更改才能进行动画处理，因此我们setTimeout可以延迟更改，transition.startAnim这基本上会导致动画从计算位置返回0。