动态切换元素class时CSS动画无法二次触发重播的解决方法

CSS动画仅会在三种场景下从头触发：元素首次渲染到页面、绑定动画的CSS属性被新增到元素上、动画名称发生变更。
你当前的代码里三个颜色类都绑定了完全相同的appear动画，直接替换元素class时，浏览器判定伪元素上的动画属性没有发生变化，因此不会重启动画，仅第一次添加带动画的类时会触发一次淡入，后续切换都直接显示最终状态。

核心思路是切换class时强制浏览器完成一次重绘，让浏览器识别到动画状态的重置。

修改JS逻辑 #

替换原来直接赋值class的写法，先移除旧类、触发重绘后再添加新类：

function changit(color) {
  const cont = document.getElementById('cont');
  // 移除所有现有颜色类
  cont.classList.remove('red', 'blue', 'black');
  // 访问offsetWidth强制浏览器触发重绘，清除之前的动画状态
  void cont.offsetWidth;
  // 添加目标颜色类，此时动画会从头播放
  cont.classList.add(color);
}

优化CSS写法 #

可以把动画规则抽离到伪元素的默认样式里，减少冗余代码，同时修正原代码里无意义的sticky定位（做背景层用absolute定位更合理），删掉多余的transition属性避免动画冲突：

@keyframes appear {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#cont {
  position: relative;
  width: 100px;
  height: 100px;
}

#cont::before {
  position: absolute;
  width: 93%;
  height: 100%;
  content: "";
  display: block;
  animation: appear 2s ease;
}

.red::before {
  background: url(https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg) no-repeat;
}

.blue::before {
  background: url(https://www.gravatar.com/avatar/24780fb6df85a943c7aea0402c843737?s=64&d=identicon&r=PG) no-repeat;
}

.black::before {
  background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/subcommunities/intel.svg?v=0371bf2f3b96) no-repeat;
}

实现原理 #

• 读取元素的offsetWidth属性会强制浏览器立即计算当前元素的布局信息，完成一次重绘，确认旧的动画绑定已经被移除
• 后续添加新的颜色类时，浏览器会将其判定为动画属性的新增操作，自动从头播放淡入动画
• 每次切换颜色都会重复这个流程，就能实现每次点击按钮都触发淡入过渡的预期效果。

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