反应动画以将元素从一个父对象移动到另一个父元素 [英] React animation for moving an element from one parent to another

问题描述

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

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

用户应该能够单击一个元素并将其移至另一个div.

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演示: https://codepen.io/ee92/pen/LqrBjL?编辑者= 0010

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

衷心感谢并感谢您对如何实现此div到div动画的任何帮助或建议.

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

推荐答案

不可能

无法以这种方式进行动画处理，因为DOM认为您正在删除div然后添加新的div.即使您使用相同的div，DOM也没有该上下文.动画是通过更改CSS(而不是HTML)来控制的.

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.

...但是这是操作方法

如果您实际上需要将两个列表都保留在不同的div中，则您可以执行以下操作之一:

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

1. 将old item设置为new item位置，然后删除old item并显示new item.
2. 删除old item并在old item所在的位置创建一个new item，然后将其移至new item位置.

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.

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

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

发生了什么事

1. 在.item中添加transition可以在调整transform属性时使动画发生.
2. 在项目单击时，我们会更新状态列表并添加...
3. transition.item知道哪个项目正在制作动画...
4. transition.startTop知道项目应相对于要移动的列表底部的偏移量y的位置，然后...
5. transition.startAnim作为控制动画的标志.
6. 由于transition动画前需要进行一些更改，因此我们使用setTimeout延迟transition.startAnim的更改，这基本上会使动画从计算的位置返回到0.

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.

这篇关于反应动画以将元素从一个父对象移动到另一个父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！