如何简化控制CSS动画的JavaScript代码？

先修正你代码里的一个小问题：e.preventDefault 要写成 e.preventDefault()，不然不会实际生效阻止默认行为。

针对你的代码，这里提供几个精简优化的方向：

1. 提取通用动画重置逻辑 #

你每个元素都重复执行「清空类 → 触发重绘 → 添加动画类」的操作，把这部分封装成通用函数，能大幅减少冗余代码。

2. 提前获取DOM元素 #

不要每次点击时都调用getElementById，提前把需要操作的元素获取好，既提升性能又让代码更简洁。

3. 批量处理动画元素 #

把需要添加动画的元素和对应类名整理成数组，遍历处理比逐行写更清爽。

优化后的代码： #

// 提前获取所有要操作的DOM元素
const playbtn = document.querySelector('你的按钮选择器');
const ball = document.getElementById('ball'); // 假设ball有对应id
const bowl = document.getElementById('bowl');
const dFace = document.getElementById('dFace');
const ear = document.getElementById('ear');
const mouth = document.getElementById('mouthid');

// 通用动画触发函数
function resetAndPlayAnimation(element, animClass) {
  element.className = '';
  // 用void触发重绘，强制浏览器重新计算样式，确保动画能从头播放
  void element.offsetWidth;
  element.classList.add(animClass);
}

playbtn.addEventListener("click", function (e) {
  e.preventDefault();
  ball.style.display = "block";
  bowl.style.display = "none";

  // 批量触发各元素动画
  resetAndPlayAnimation(ball, 'ball-move');
  resetAndPlayAnimation(dFace, 'p-head-move');
  resetAndPlayAnimation(ear, 'lean');
  resetAndPlayAnimation(mouth, 'mouth-move');

}, false);

额外补充： #

如果想尽量减少JS代码，确实可以尝试纯CSS方案，比如：

• 用<input type="checkbox">结合:checked伪类，通过兄弟选择器控制元素显示隐藏和动画；
• 用:target伪类，通过锚点跳转触发动画。
  但如果你的交互逻辑复杂（比如多按钮状态冲突），JS方案还是更灵活，上面的精简写法已经把代码复杂度降到最低了。

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