如何在JavaScript或CSS中让元素动画结束后支持拖拽功能

animation-fill-mode: forwards 生效时，CSS动画结束后会持续应用最后一帧的属性值，且CSS动画的属性优先级高于普通行内样式，因此拖拽时通过JS设置的transform行内样式会被动画规则覆盖，导致拖拽失效。

方案1：动画结束后固化状态、清除动画属性（推荐） #

监听元素的动画结束事件，将动画最终状态写入行内样式，同时移除动画相关规则，彻底解决优先级冲突，同时同步拖拽的初始坐标避免拖拽时跳变。
代码示例：

const h1Ele = document.querySelector('#h1')
const position = { x: 0, y: 0 }

// 监听动画结束事件
h1Ele.addEventListener('animationend', () => {
  // 写入动画最终的transform值到行内
  h1Ele.style.transform = 'translate(-50px, -100px)'
  // 清除动画属性，避免优先级冲突
  h1Ele.style.animation = 'none'
  // 同步拖拽初始坐标为动画结束位置
  position.x = -50
  position.y = -100
})

// 原有拖拽逻辑保持不变
interact('#h1').draggable({
  listeners: {
    start (event) {
      console.log(event.type, event.target)
    },
    move (event) {
      position.x += event.dx
      position.y += event.dy
      event.target.style.transform = `translate(${position.x}px, ${position.y}px)`
    },
  }
})

方案2：提高拖拽样式优先级 #

通过setProperty设置带!important标识的transform属性，强制让拖拽样式优先级高于动画规则：

interact('#h1').draggable({
  listeners: {
    start (event) {
      console.log(event.type, event.target)
    },
    move (event) {
      position.x += event.dx
      position.y += event.dy
      // 加important提高优先级
      event.target.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`, 'important')
    },
  }
})

该方案无需修改动画逻辑，但可能导致后续其他样式调整出现优先级冲突，仅适合临时快速验证使用。

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