Web Animation API fill模式异常：拖拽元素后续交互失效问题

问题描述 #

我制作了一个模拟棋盘可拖拽棋子的极简示例，期望在pointerup事件触发时，让棋子通过动画回弹至初始位置。当不设置fill模式（默认fill: 'none'），并在动画结束后手动设置元素transform时功能正常；但设置fill: 'forwards'后，即便调用commitStyles()提交样式，后续拖拽操作仍失效——开发者工具显示棋子的transform属性已更新，但实际位置未改变。

原因分析 #

Web Animation API的动画样式优先级高于元素的inline样式（element.style）。当设置fill: 'forwards'时，动画结束后会在动画层保留最终帧的样式，这个样式的优先级会覆盖你通过elm.style.transform设置的inline样式。即使调用commitStyles()，它只是将动画的最终样式同步到元素的计算样式中，但并没有移除动画本身的填充状态，后续修改inline的transform会被动画留存的样式覆盖，导致视觉上元素位置无变化。

解决方案 #

方案1：动画结束后取消动画 #

在动画完成的回调中，调用animation.cancel()移除动画的填充样式，让inline样式重新获得优先级：

function performSnapback2(elm) {
  const opts = { duration: 300, fill: 'forwards' }
  const keyframes = [{ transform: `translate(${lastPos.x}px, ${lastPos.y}px)` }]  
  const animation = elm.animate(keyframes, opts)

  animation.onfinish = () => {
    animation.commitStyles();
    animation.cancel(); // 取消动画，清除填充样式
  }
}

方案2：使用CSS变量统一控制transform #

将transform的位移值存入CSS变量，动画和拖拽操作都通过修改变量来控制元素位置，从根源避免样式优先级冲突：

首先修改CSS：

div {
  position: absolute;
  background: plum;
  width: 70px;
  height: 70px;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
}

然后更新JavaScript中的相关函数：

function translateElement(elm, dx, dy) {
  elm.style.setProperty('--tx', `${dx}px`);
  elm.style.setProperty('--ty', `${dy}px`);
}

function performSnapback2(elm) {
  const opts = { duration: 300, fill: 'forwards' }
  const keyframes = [{ 
    '--tx': `${lastPos.x}px`,
    '--ty': `${lastPos.y}px`
  }]  
  const animation = elm.animate(keyframes, opts)

  animation.onfinish = () => {
    animation.commitStyles();
  }
}

验证说明 #

• 方案1通过取消动画清除了高优先级的填充样式，使后续的inline transform修改能正常生效；
• 方案2通过CSS变量统一管理位移值，动画和手动操作都作用于同一个变量，不存在优先级覆盖问题。

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