如何实现两个 SVG/HTML 矩形元素平滑互换位置且避免二次跳动-html教程-PHP中文网

本文详解如何通过 CSS 变量精确控制位移距离、利用 transitionend 事件精准触发 DOM 重排，彻底解决矩形交换后因硬编码偏移量或过渡残留导致的“回弹”或“额外移动”问题。

本文详解如何通过 css 变量精确控制位移距离、利用 `transitionend` 事件精准触发 dom 重排，彻底解决矩形交换后因硬编码偏移量或过渡残留导致的“回弹”或“额外移动”问题。

在实现可交互的列表项上下移动动画（如拖拽排序的轻量替代方案）时，一个常见陷阱是：视觉动画看似完成，但元素在 DOM 重排后又发生意外位移——这通常源于位移距离计算不准确与过渡样式未及时清除。

原始代码中，.move-up 和 .move-down 类强制使用了 transform: translateY(-120px) 和 +120px，但实际每个 .rectangle 的总垂直占用高度为：
height (100px) + top/bottom margin (10px × 2 = 20px) + border (1px × 2 = 2px) → 共 122px（非 120px）。微小偏差在动画结束瞬间被浏览器渲染为“回抽”，造成视觉上的“向上闪动”。

✅ 正确解法是用 CSS 自定义变量动态计算位移量，确保像素级精准：

.container {
  --rectangle-height: 100px;
  --rectangle-border: 1px;
  --rectangle-margin: 10px;
  --travel-distance: calc(
    var(--rectangle-height) 
    + 2 * var(--rectangle-border) 
    + 2 * var(--rectangle-margin)
  );
}

.move-up {
  transition: transform 0.5s ease-in-out;
  transform: translateY(calc(-1 * var(--travel-distance)));
}

.move-down {
  transition: transform 0.5s ease-in-out;
  transform: translateY(var(--travel-distance));
}

更重要的是，过渡动画与 DOM 结构更新必须严格解耦。原代码用 setTimeout(1000) 模拟动画时长，但实际过渡时间受 ease-in-out 影响，未必精确 1s；且若用户快速连点，setTimeout 可能堆积或错乱。

✅ 推荐做法是监听 transitionend 事件，并配合 { once: true } 选项，确保回调仅执行一次：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

// 仅当向上按钮被点击且非首项时触发
if (isUpAction && !isFirstElement) {
  const el = targetElement.parentNode;
  const prev = el.previousElementSibling;

  // 添加动画类
  el.classList.add('move-up');
  prev.classList.add('move-down');

  // 动画结束后，清除所有过渡类并重排 DOM
  el.addEventListener('transitionend', onTransitionFinished('up', el, prev), { once: true });
}

对应的处理函数负责原子化清理与插入：

function onTransitionFinished(direction, moving, target) {
  return function() {
    // ✅ 全局清除过渡类（避免残留影响后续动画）
    document.querySelectorAll('.rectangle').forEach(r => {
      r.classList.remove('move-up', 'move-down');
    });

    // ✅ 此时 transition 已结束，DOM 插入不再触发动画
    if (direction === 'up') {
      target.parentNode.insertBefore(moving, target);
    } else {
      moving.parentNode.insertBefore(target, moving);
    }
  };
}

⚠️ 注意事项：