如何延迟insertBefore执行并实现元素插入的平滑过渡效果？

问题分析 #

1. setTimeout失效原因：你之前的代码里，setTimeout内部函数会改变this指向（指向window），导致无法正确获取点击的元素，所以insertBefore执行失败。
2. 过渡效果无法实现：使用float布局时，元素的位置变化无法通过CSS transition实现平滑过渡，需要改用Flex布局来支持动画效果。

实现步骤 #

1. 把容器改为Flex布局，让元素排列可控，同时支持过渡动画。
2. 修复setTimeout的this指向问题，通过提前保存变量或使用箭头函数绑定上下文。
3. 先通过CSS动画让元素完成平滑位移，再执行insertBefore修正DOM结构，既保证视觉平滑，也同步DOM顺序。

修改后的完整代码 #

HTML

<div id="gallery">
  <div class="frame a">A</div>
  <div class="frame b">B</div>
</div>

CSS

#gallery {
  display: flex;
  gap: 0; /* 保持元素紧密排列 */
  position: relative;
}

.frame {
  width: 200px;
  height: 100px;
  font: bold 400% sans-serif;
  color: white;
  transition: transform 0.5s ease; /* 添加过渡动画 */
  flex-shrink: 0; /* 防止元素被压缩 */
}

.frame.a {
  background-color: brown;
}

.frame.b {
  background-color: purple;
}

/* 定义位移动画类 */
.frame.move-left {
  transform: translateX(-100%);
}
.frame.move-right {
  transform: translateX(100%);
}

JavaScript

const gallery = document.getElementById('gallery');
const frames = gallery.querySelectorAll('.frame');

for (let i = 0; i < frames.length; ++i) {
  frames[i].addEventListener('click', function() {
    const currentEl = this;
    const prevEl = currentEl.previousElementSibling;
    
    if (!prevEl) return; // 已经是第一个元素，无需移动
    
    // 给当前元素和前一个元素添加动画类，触发视觉位移
    currentEl.classList.add('move-left');
    prevEl.classList.add('move-right');
    
    // 等待动画结束后，修正DOM结构，同时移除动画类
    setTimeout(() => {
      gallery.insertBefore(currentEl, prevEl);
      currentEl.classList.remove('move-left');
      prevEl.classList.remove('move-right');
    }, 500); // 时长和CSS过渡时间保持一致
  });
}

补充说明 #

如果一定要先延迟再执行insertBefore，同时让插入后的元素有过渡效果，可以调整逻辑：先将元素设为透明或移出视口，延迟插入后再通过过渡动画显示/移入，但这种方式的视觉流畅度不如先动画再修正DOM的方案。

内容的提问来源于stack exchange，提问作者Table