Реагировать на анимацию для перемещения элемента от одного родителя к другому

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 считает, что вы удаляете div, а затем добавляете новый div.Даже при том, что это то же самое div для вас, DOM не имеет такого контекста.Анимации контролируются изменениями CSS, а не HTML.

... но вот как это сделать

Если вам действительно нужно, чтобы оба списка оставались в разных div s, лучшее, что вы можете сделать, это либо:

1. Анимируйте old item в положение new item, затем удалите old item и покажите new item.
2. Удалите old item и создайте new itemгде находится old item и переместите его в положение new item.

Та же концепция, два способа сделать это.

Я изменил ваш существующий образец, чтобы показать упрощенная версия варианта 2. Обратите внимание, что существует целый ряд решений в отношении анимации, например, что происходит, когда список становится меньше, как элементы должны меняться с красного на зеленый и т. д., и я не пыталсяобъективно их решить.Кроме того, это было бы намного проще, если бы вы могли иметь все item для обоих списков в одном div и контролировать их позиции absolute ly.Но если они должны оказаться в отдельных 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. Поскольку transition s нужно что-то изменить, прежде чем они будут анимированы, мы используем setTimeout, чтобы отложить изменение transition.startAnim который в основном вызывает анимацию из вычисленной позиции, обратно к 0.