JavaScript使用toggle切换class触发CSS @keyframes移动动画不生效求助

存在的问题 #

• document.getElementsByClassName 返回的是匹配类名的元素集合（类数组结构），不是单个DOM元素，直接访问classList会抛出错误，需要取下标[0]获取第一个匹配的机器人元素。
• classList.toggle 是操作类的方法，不是可赋值的属性，你错误地用赋值语法修改了toggle属性本身，没有执行类切换逻辑。
• 可选优化：当前动画运行结束后元素会回到初始位置，若要让机器人停在移动后的终点，需要给动画设置animation-fill-mode: forwards属性。

修复后的代码 #

JavaScript 代码

function moveR() {
  // 获取第一个匹配的机器人元素
  const robot = document.getElementsByClassName("robot1")[0];
  // 正确调用toggle方法切换moveRight类
  robot.classList.toggle("moveRight");
}

如果需要每次点击按钮都重新触发向右移动的动画，而不是切换动画状态，可以用以下写法：

function moveR() {
  const robot = document.getElementsByClassName("robot1")[0];
  // 先移除类重置状态
  robot.classList.remove("moveRight");
  // 触发浏览器重排，让状态重置生效
  void robot.offsetWidth;
  // 添加类触发动画
  robot.classList.add("moveRight");
}

CSS 代码（可选优化）

.moveRight {
  animation-name: moveRight;
  animation-duration: 3s;
  /* 保持动画最后一帧的状态 */
  animation-fill-mode: forwards;
}

内容的提问来源于stack exchange，提问作者Ganda W Maung