使用JavaScript的classList.toggle切换元素类时CSS淡入动画不生效如何解决

核心问题1：CSS关键帧拼写错误 #

你定义的fade动画起始状态拼写错误，把from写成了form，导致浏览器无法识别动画规则，这是动画完全不触发的首要原因。

核心问题2：动画类逻辑冗余混乱 #

你定义的.animation和.animation2样式规则完全一致，同时对同一个元素反复切换两个规则相同的类属于无效操作，浏览器会判定样式没有发生有效变更，不会触发动画重绘。

核心问题3：动画重复触发机制缺失 #

同一动画要重复触发，需要先移除动画类让浏览器重置元素状态，再重新添加类才能触发二次执行，你当前的同步toggle操作会被浏览器的样式合并机制优化，无法触发重绘。

修正后的完整代码 #

CSS部分 #

* {
  font-family: 'Cartograph CF';
}

#checkBox {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

form {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  font-size: 30px;
}

label {
  user-select: none;
  /* 基础状态opacity为1，避免移除动画类时元素消失 */
  opacity: 1;
}

.animation {
  animation: fade .3s ease-in-out forwards;
  opacity: 0;
}

span {
  opacity: 0;
}

/* 修正from的拼写错误 */
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

JavaScript部分 #

const checkBox = document.querySelector('#checkBox');
const label = document.querySelector('#label');

function verify() {
  if (checkBox.checked) {
    label.innerHTML = '<-<span>Un</span>Checked :)'
  } else {
    label.innerHTML = '<-UnChecked :('
  }
  // 每次更新内容后触发淡入动画
  triggerFade()
}

function triggerFade() {
  // 先移除动画类
  label.classList.remove('animation');
  checkBox.classList.remove('animation');
  // 强制浏览器重绘，读取offsetWidth触发重排
  void label.offsetWidth;
  void checkBox.offsetWidth;
  // 重新添加动画类触发淡入
  label.classList.add('animation');
  checkBox.classList.add('animation');
}

checkBox.addEventListener('click', verify);
checkBox.click();

setInterval(() => {
  checkBox.click();
  setTimeout(() => {
    checkBox.click()
  }, 2000);
}, 4000);

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form>
    <input type="checkbox" id="checkBox" class="animation">
    <label for="checkBox" id="label" class="animation"><-UnChecked :(</label>
  </form>
</body>
</html>

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