动画 DOM 元素交换

Answer 1

我更新了你的代码笔：

https://codepen.io/anon/pen/VXMdwE

问题是你的CSS包含这个：

.child {
  transition: transform ease-in 0.3s; 
}

实际上只有一个特定时间您希望子级上的转换处于活动状态：在交换过程的中间。您不希望在交换过程结束时进行转换，所以我这样做了：

.css：

.child.transition {
  transition: transform ease-in 0.3s;
}

.js

document.querySelector('button').addEventListener('click', () => {
  if (swapDone === false) {
    childA.classList.add('transition');
    childB.classList.add('transition');

    ...
    setTimeout(() => {
      document.querySelector('.container').insertBefore(childB, childA);
      childA.classList.remove('transition');
      childB.classList.remove('transition');
      childB.removeAttribute('style');
      childA.removeAttribute('style');
    }, 300);

这样，当您删除过渡样式时，就不再有过渡动画了

Answer 2

我打算使用上面更新的代码片段，但不止一次。

调用一次交换函数，交换就会正确发生，尽管应用第二次或更多次，动画可见，但最后 div-s 顺序仍然保留。

有什么技巧可以多次使用吗？