touch-move拖拽transform后CSS动画元素播放位置异常如何解决

出现位置跳回的核心原因是CSS transform 属性的优先级覆盖规则：

• 拖拽过程中，你通过行内样式el.style.transform给小球设置了translate3d(x,y,0)实现位置移动
• 给小球添加弹跳动画类后，@keyframes中定义的transform值会完全覆盖行内样式的transform属性，而关键帧定义里没有包含拖拽产生的X/Y位置偏移，浏览器会直接以元素初始无偏移的位置作为动画起点，就出现了跳回原点播放的问题。

不需要修改原有弹跳动画的缓动曲线、运动幅度，全程保留CSS动画的流畅性，只需要通过CSS变量传递拖拽偏移量，做3处小调整即可：

1. 用CSS变量存储小球实时的X/Y拖拽偏移，让动画关键帧可以引用这个偏移值，避免动画覆盖拖拽位置
2. 动画添加forwards属性保持结束帧状态，避免动画结束后跳回
3. 监听动画结束事件，把最终位置固化到行内样式，移除动画类避免后续拖拽冲突

具体修改代码 #

1. 调整CSS部分 #

#item {
  width: 100px;
  height: 100px;
  background-color: rgb(245, 230, 99);
  border: 10px solid rgba(136, 136, 136, .5);
  border-radius: 50%;
  touch-action: none;
  user-select: none;
  position: absolute;
  /* 新增：定义位置偏移CSS变量，初始值为0 */
  --drag-x: 0px;
  --drag-y: 0px;
}
.bugout{
  /* 新增forwards，保持动画最后一帧状态 */
  animation: card-out 0.6s cubic-bezier(.8,.2,.1,0.8) forwards;
}
@keyframes card-out {
  /* 所有关键帧的transform前追加拖拽偏移变量，保留拖拽后的位置 */
  0% { z-index: 20; transform: translate3d(var(--drag-x), var(--drag-y), 0) translateY(0%) rotate(0deg); }
  5% { z-index: 20; transform: translate3d(var(--drag-x), var(--drag-y), 0) translateY(-5%) rotate(-4deg); }
  49% { z-index:20;transform: translate3d(var(--drag-x), var(--drag-y), 0) translateY(-120%) ; }
  100% { z-index:5;transform: translate3d(var(--drag-x), var(--drag-y), 0) translateY(-120%) ; }
}
#box1 {
  width: 200px;
  height: 200px;
  background-color: red;
}

2. 调整JS的setTranslate方法 #

原来的方法直接写行内transform，改为同步更新CSS变量，让动画可以拿到实时偏移：

function setTranslate(xPos, yPos, el) {
  // 同步更新CSS变量存储的拖拽偏移
  el.style.setProperty('--drag-x', `${xPos}px`);
  el.style.setProperty('--drag-y', `${yPos}px`);
  // 非动画状态下直接应用偏移实现拖拽移动
  if(!el.classList.contains('bugout')){
    el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
  }
}

3. 新增动画结束监听，固化最终位置 #

在JS的事件监听区域追加以下代码，避免动画结束后状态丢失：

// 监听弹跳动画结束
dragItem.addEventListener('animationend', () => {
  // 计算动画结束后的最终Y坐标（对应动画里-120%的向上偏移）
  const finalY = yOffset - dragItem.offsetHeight * 1.2;
  // 固化最终位置到行内样式
  dragItem.style.transform = `translate3d(${xOffset}px, ${finalY}px, 0)`;
  // 更新全局偏移记录，不影响下次拖拽
  yOffset = finalY;
  initialY = finalY;
  // 移除动画类
  dragItem.classList.remove('bugout');
})

• 完全保留原有CSS动画的流畅度和弹跳效果，没有改用JS逐帧动画，性能无损耗
• 无任何位置跳变，动画起点就是拖拽结束的实际位置
• 不破坏原有拖拽判定、复位的逻辑，改造成本极低

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