如何重新触发平移动画函数？原生JS解决方案求助

这问题我之前也碰到过，浏览器对CSS动画的触发逻辑是：只有当动画属性真正发生变化时才会重新执行，直接重复设置相同的动画名称是不会触发的。给你两个靠谱的原生JS解决方案：

方案一：重置动画+强制重绘 #

核心思路是先清除当前动画，通过读取元素的布局属性（比如offsetHeight）强制浏览器重绘，再重新设置动画，让浏览器识别到动画属性的变化。

完整代码示例 #

#element {
  width: 10px;
  height: 10px;
  background: #000; /* 加个背景方便观察效果 */
}

@keyframes movedown {
  100% {
    transform: translateY(10px);
  }
}

<div id="element"></div>
<button id="btn_button">触发动画</button>

const element = document.getElementById('element');
const btn_button = document.getElementById('btn_button');

btn_button.onclick = () => {
  // 1. 清除当前动画样式
  element.style.animation = 'none';
  // 2. 强制浏览器重绘（必须步骤，否则清除和重新设置会被浏览器合并忽略）
  void element.offsetHeight;
  // 3. 重新设置动画
  element.style.animation = 'movedown 1s';
};

方案二：用CSS类管理动画+animationend事件 #

这种方法更符合“关注点分离”的原则，把动画逻辑放在CSS里，JS只负责添加/移除类，配合animationend事件在动画结束后移除类，确保下次点击时类是从无到有添加，触发动画。

完整代码示例 #

#element {
  width: 10px;
  height: 10px;
  background: #000;
}

/* 将动画封装为独立类 */
.element-animate {
  animation: movedown 1s forwards; /* forwards可选，用于保留动画结束状态 */
}

@keyframes movedown {
  100% {
    transform: translateY(10px);
  }
}

<div id="element"></div>
<button id="btn_button">触发动画</button>

const element = document.getElementById('element');
const btn_button = document.getElementById('btn_button');

btn_button.onclick = () => {
  // 先移除类（避免连续点击时重复添加无效）
  element.classList.remove('element-animate');
  // 强制重绘
  void element.offsetHeight;
  // 添加类触发动画
  element.classList.add('element-animate');
};

// 可选：动画结束后自动移除类（不需要保留结束状态时启用）
element.addEventListener('animationend', () => {
  element.classList.remove('element-animate');
});

为什么之前的尝试没成功？ #

• 直接移除/添加类但没强制重绘：浏览器会合并DOM操作，移除再添加类的动作被忽略，动画不会重新触发。
• 用animationend但没处理重绘：如果动画结束后没正确移除类，下次添加类时类已经存在，浏览器不会识别为“属性变化”，自然不会触发动画。

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