Bootstrap 4.0.0轮播淡入淡出动画：离开动画失效问题求助

嗨，我来帮你搞定这个问题！你遇到的淡出动画不生效的核心原因是：默认情况下，Bootstrap轮播切换时会把非active的item从视觉流中移除（比如改变定位或display属性），而背景图的item如果没有保持叠加状态，就无法完成淡出过渡。之前参考的<img>方案能生效，是因为img元素本身的布局特性更容易保持叠加，而背景图需要额外调整定位和层级。

问题根源拆解 #

你现有的CSS只设置了.carousel-item的初始opacity和active时的opacity变化，但没有处理轮播切换过程中，旧的active item需要保持在DOM中并逐渐淡出的状态。Bootstrap在切换时会给item添加carousel-item-left/carousel-item-right等类，我们需要针对这些状态做样式适配，同时让所有item叠加在一起。

完整解决方案代码 #

替换你现有的CSS为以下代码，我会逐行解释关键部分：

/* 确保轮播容器隐藏溢出内容 */
.carousel.carousel-fade {
  overflow: hidden;
}

/* 基础样式：让所有轮播item叠加，设置过渡属性 */
.carousel.carousel-fade .carousel-inner .carousel-item {
  opacity: 0;
  transition: opacity ease-out .7s;
  position: absolute; /* 绝对定位让所有item叠在同一位置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 强制item占满容器高度，适配背景图 */
  background-size: cover; /* 可选：确保背景图铺满item */
  background-position: center; /* 可选：居中显示背景图 */
}

/* 激活状态的item：显示在最上层 */
.carousel.carousel-fade .carousel-inner .carousel-item.active {
  opacity: 1;
  position: relative; /* 重置定位，或者用z-index:10也可以 */
  z-index: 10;
}

/* 关键：让刚被替换的active item保持淡出状态 */
.carousel.carousel-fade .carousel-inner .carousel-item.active.carousel-item-left,
.carousel.carousel-fade .carousel-inner .carousel-item.active.carousel-item-right {
  opacity: 0;
  z-index: 10;
}

/* 新的即将激活的item：提前设置为可见 */
.carousel.carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
.carousel.carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
  opacity: 1;
  z-index: 10;
}

/* 确保控制按钮在轮播item之上 */
.carousel.carousel-fade .carousel-control-prev,
.carousel.carousel-fade .carousel-control-next {
  z-index: 11;
}

关键调整说明 #

1. 绝对定位叠加item：通过position: absolute让所有轮播item都放在容器的同一位置，这样切换时新旧item能同时存在，一个淡出一个淡入。
2. 处理切换状态类：针对Bootstrap切换时添加的carousel-item-left/carousel-item-right类，设置旧active item的opacity为0，触发淡出动画。
3. 层级控制：用z-index确保active item和控制按钮在正确的层级，避免被遮挡。
4. 背景图适配：添加background-size和background-position让背景图更好地铺满item，同时强制height:100%确保item有高度（你也可以给.carousel设置固定高度，比如height: 600px）。

额外注意事项 #

• 确保你的.carousel和.carousel-inner容器有明确的高度，否则背景图的item可能无法显示。
• 不要修改Bootstrap的核心JS文件，通过自定义CSS就能解决问题。

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