Javascript 为DOM元素交换设置动画

我想以一种普通的方式制作两个DOM元素交换的动画

我在动画结束时遇到了一个问题，但我不知道是什么原因造成的：/

这是我的密码：

HTML

这是我的密码笔：

---

提前感谢；）

我更新了你的代码笔：

问题是您的css包含以下内容：

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

<>实际上只有一个特定的时间，你需要对孩子进行转换：在交换过程中间。您不希望在交换过程结束时进行转换，因此我这样做：

.css：

.js

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

非常感谢；）祝您有个美好的一天！

const childA = document.querySelector('#childA');
const childB = document.querySelector('#childB');
const finalChildAStyle = {
  x: null,
  y: null,
};
const finalChildBStyle = {
  x: null,
  y: null,
};

let swapDone = false;

document.querySelector('button').addEventListener('click', () => {
  if (swapDone === false) {
    finalChildAStyle.x = childA.getBoundingClientRect().left - childB.getBoundingClientRect().left;
    finalChildAStyle.y = childB.getBoundingClientRect().top - childA.getBoundingClientRect().top;
    finalChildBStyle.x = childB.getBoundingClientRect().left - childA.getBoundingClientRect().left;
    finalChildBStyle.y = childA.getBoundingClientRect().top - childB.getBoundingClientRect().top;
    childA.style.transform = `translate(${finalChildAStyle.x}px, ${finalChildAStyle.y}px)`;
    childB.style.transform = `translate(${finalChildBStyle.x}px, ${finalChildBStyle.y}px)`;

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

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

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

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);