移除元素类名无法触发CSS动画：轮播淡入效果仅首次生效

我懂你遇到的困扰了——明明每次切换都先移除了fade类再重新添加，可动画偏偏只在第一次切换时工作，之后那个类就像粘在元素上一样，怎么都触发不了新的动画效果。这其实是浏览器的批量渲染机制在搞鬼，咱们一步步来搞定它：

问题根源 #

当你在同一个JavaScript事件循环里连续执行classList.remove("fade")和classList.add("fade")时，浏览器会把这两个操作合并成一次DOM更新。在浏览器看来，元素的类名根本没变化，自然不会重新触发动画。

解决方案1：用setTimeout拆分事件循环 #

最简单的修复方式，就是把添加类的操作延迟到下一个事件循环执行，给浏览器足够的时间处理移除类的渲染操作：

let sliderInterval = setInterval(nextImg, 3000);
function nextImg() { imgChange(sliderNum + 1); }
const heroImg = document.querySelector('.hero__image');

function imgChange(x) {
  heroImg.classList.remove("fade");
  sliderNum = (x + imgLocations.length) % imgLocations.length;
  heroImg.src = imgLocations[sliderNum];
  
  // 延迟10ms添加类，让浏览器完成移除操作的渲染
  setTimeout(() => {
    heroImg.classList.add("fade");
  }, 10);
}

哪怕延迟0ms也能生效（因为会把回调放到下一个事件队列），但加个10ms的缓冲能避免一些极端情况。

解决方案2：监听动画结束事件（更可靠） #

如果不想依赖定时器，还可以监听动画的animationend事件，动画结束后自动移除fade类，这样下次切换时添加类就一定会触发新的动画：

let sliderInterval = setInterval(nextImg, 3000);
function nextImg() { imgChange(sliderNum + 1); }
const heroImg = document.querySelector('.hero__image');

// 初始化时触发第一次动画
heroImg.classList.add("fade");
// 动画结束后自动移除类
heroImg.addEventListener('animationend', () => {
  heroImg.classList.remove("fade");
});

function imgChange(x) {
  sliderNum = (x + imgLocations.length) % imgLocations.length;
  heroImg.src = imgLocations[sliderNum];
  // 直接添加类即可，因为上一次动画结束后已经移除了
  heroImg.classList.add("fade");
}

额外优化：配合图片预加载避免空白 #

如果你的图片尺寸较大，切换时可能会出现短暂空白。可以先预加载图片，等加载完成后再切换并触发动画：

function imgChange(x) {
  heroImg.classList.remove("fade");
  sliderNum = (x + imgLocations.length) % imgLocations.length;
  
  // 创建临时图片对象预加载
  const tempImg = new Image();
  tempImg.src = imgLocations[sliderNum];
  
  tempImg.onload = () => {
    heroImg.src = tempImg.src;
    setTimeout(() => {
      heroImg.classList.add("fade");
    }, 10);
  };
}

这样用户看到的永远是加载完成的图片淡入，体验更流畅。

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