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

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-to-div 动画的任何帮助或建议。

Answer 1

不，这是不可能的

不可能以这种方式制作动画，因为 DOM 认为您正在删除 adiv然后添加一个新的div. 即使它对div你来说是一样的，DOM 没有那个上下文。动画由 CSS 的更改控制，而不是 HTML。

...但这是如何做到的

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

1. 将 动画化old item到该new item位置，然后删除old item并显示new item。
2. 删除old item并创建一个new itemwhereold 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.