如何实现每次点击事件触发时重新运行JavaScript动画函数？

你的代码目前只能执行一次动画，原因是设置forwards后，动画结束会保持最后一帧状态，再次点击时浏览器会判定动画已完成，不会重新触发。要实现每次点击都重启动画，需要先重置动画状态，再重新触发：

修改后的代码 #

CSS 部分 #

#myDiv {
  animation: none;
}

/* 必须定义对应的关键帧动画（示例为位移动画，可根据需求修改） */
@keyframes animation {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}

JavaScript 部分 #

function myFun() {
  const div = document.getElementById('myDiv');
  
  // 重置动画状态
  div.style.animation = 'none';
  
  // 强制浏览器触发重绘，确保重置操作生效
  void div.offsetWidth;
  
  // 重新启动动画
  div.style.animation = 'animation 1s forwards';
}

原理说明 #

• 先将animation设为none，清除当前动画的执行状态；
• 调用void div.offsetWidth会强制浏览器重新计算元素布局并触发重绘，避免浏览器因优化忽略后续的动画设置；
• 最后重新设置动画参数，此时浏览器会判定为新的动画触发，从而从头执行动画。

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