如何在淡入动画执行完成后移除元素上绑定的CSS类？

你的淡入动画失效核心是类的移除、函数递归时机完全错误：

• classList.remove("fade-in")写在了setTimeout外部，每次调用changeImage都会立刻执行移除操作：要么是类还没加上就先执行了移除，要么是刚加上类还没等动画开始播放就被删掉，浏览器无法触发完整的动画渲染流程
• 刚给元素加上fade-in类就立刻递归调用下一轮changeImage，没有等待1.5s动画执行完成，和你设置的2600ms切换间隔完全错位
• 索引走到数组末尾触发重置时，没有设置间隔就直接调用changeImage(0)，会出现跳帧、无停顿切换的问题

最可靠的类移除方式是监听DOM元素的animationend事件，这个事件会在绑定的CSS动画执行完成后自动触发，不需要手动卡时间计算延迟，不会因为浏览器卡顿、动画时长调整出现时机偏差。
修正后的完整实现不需要改动HTML结构，只需要微调CSS、重构JS逻辑即可：

调整后的CSS（新增可选优化） #

.fade-in{
    animation: fadeIn 1.5s forwards; /* 加forwards让动画结束后保持最终透明度样式，避免跳变 */
}

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


#changing-image{
      background-image: url(../images/asides/Interior.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      width:  60rem;
      height: 50rem;
      overflow: hidden;
      border-radius: 2px;
  }

修正后的JS逻辑 #

const imagesArray = ["url(img1)", "url(img2)", "url(img3)", "url(img4)"];
// 缓存DOM元素，避免每次切换都重复查询DOM
const imgContainer = document.getElementById('changing-image');
let currentIndex = 0;

// 动画执行完成后自动移除fade-in类
imgContainer.addEventListener('animationend', () => {
  imgContainer.classList.remove('fade-in');
});

const changeImage = () => {
  // 更新背景图片
  imgContainer.style.backgroundImage = imagesArray[currentIndex];
  // 添加类触发淡入动画
  imgContainer.classList.add('fade-in');
  // 更新索引，循环遍历图片数组
  currentIndex = (currentIndex + 1) % imagesArray.length;
  // 间隔2600ms切换下一张（包含1.5s动画时长+1.1s静态停留时长）
  setTimeout(changeImage, 2600);
};

// 启动轮播
changeImage();

补充说明 #

• 如果你希望图片完全淡入后停留2600ms再切换下一张，只需要把setTimeout的延迟时间改成1500 + 2600 = 4100即可
• 如果需要兼容极端场景（比如动画被切后台、元素隐藏打断导致animationend不触发），可以在加类的时候加一个兜底的setTimeout，延迟1600ms（比动画时长多100ms）执行移除类的操作，避免类残留导致后续动画不触发

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