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

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 认为您正在删除 div，然后添加新的 div。即使它与您相同的div，DOM 也没有那个上下文。动画由 CSS 的更改控制，而不是 HTML。

...但这里是如何做到这一点

如果您确实需要将两个列表保留在不同的divs 中，那么您可以做的最好的事情是：

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

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

我修改了您现有的示例以显示选项 2 的 简化 版本。请注意，有许多动画决定需要做出，例如当列表变小时会发生什么，项目应该如何改变红色到绿色等，我没有尝试客观地解决它们。此外，如果您可以将两个列表的所有items 放在一个div 中，并控制它们的位置absolutely，这会容易得多。但如果他们需要以单独的divs 结尾...

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。