如何用CSS动画实现Div轮播图的淡出效果？

问题根源 #

直接通过display: none/block切换轮播项显隐，会让元素瞬间从DOM渲染树中添加或移除，CSS过渡/动画根本没有执行时间，所以淡出效果被直接跳过，元素立刻消失。

解决方案 #

方法1：用opacity+visibility替代display

先给轮播项设置基础样式，通过过渡控制显隐：

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.slide.active {
  opacity: 1;
  visibility: visible;
}

切换逻辑需等待淡出完成后再触发淡入：

function switchSlide() {
  const currentSlide = document.querySelector('.slide.active');
  const nextSlide = currentSlide.nextElementSibling || document.querySelector('.slide:first-child');
  
  // 触发当前项淡出
  currentSlide.classList.remove('active');
  
  // 等待过渡结束后，再让下一项淡入
  setTimeout(() => {
    nextSlide.classList.add('active');
  }, 500); // 时间需和CSS过渡时间一致
}

方法2：用CSS关键帧动画控制

定义淡入淡出的关键帧动画：

@keyframes fadeIn {
  from { opacity: 0; visibility: visible; }
  to { opacity: 1; visibility: visible; }
}
@keyframes fadeOut {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}
.slide.fade-in {
  animation: fadeIn 0.5s forwards;
}
.slide.fade-out {
  animation: fadeOut 0.5s forwards;
}

通过监听动画结束事件完成切换：

function switchSlide() {
  const currentSlide = document.querySelector('.slide.fade-in') || document.querySelector('.slide:first-child');
  const nextSlide = currentSlide.nextElementSibling || document.querySelector('.slide:first-child');
  
  currentSlide.classList.remove('fade-in');
  currentSlide.classList.add('fade-out');
  
  // 动画结束后重置状态并触发下一项淡入
  currentSlide.addEventListener('animationend', () => {
    currentSlide.classList.remove('fade-out');
    nextSlide.classList.add('fade-in');
  }, { once: true });
}

关键注意事项 #

• 绝对不要在过渡/动画过程中修改display属性，会直接中断动画流程
• 用visibility: hidden替代display: none，因为visibility支持过渡/动画，且绝对定位的轮播项不会影响布局
• 切换时必须等待淡出动画完成再处理下一项，否则会出现重叠或瞬间切换的问题

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