React Bootstrap Carousel滑动异常，过渡前出现空白问题求助

根因 #

react-bootstrap 5.1.0版本的Carousel组件存在官方已知的样式bug：轮播切换的过渡过程中，新入场的轮播项默认透明度为0，直到动画完全结束才会重置为不透明，就会表现为过渡阶段图片消失、动画结束后直接跳转到下一张的异常效果。

可用修复方案 #

• 方案1：升级依赖版本（最推荐）
  直接将react-bootstrap和bootstrap升级到5.2.0及以上版本即可官方修复该问题，执行命令：

  npm i react-bootstrap@^5.2.0 bootstrap@^5.2.0
  

• 方案2：手动覆盖样式（无需改依赖版本）
  如果项目不便升级依赖，在全局样式文件中添加以下CSS规则即可：

  .carousel-item-next,
  .carousel-item-prev,
  .carousel-item.active {
    opacity: 1;
    transition: transform 0.6s ease-in-out;
  }
  .carousel-item-start,
  .carousel-item-end {
    opacity: 1 !important;
  }
  

• 方案3：关闭滑动过渡
  如果不需要滑动动画效果，可以直接给Carousel组件添加slide={false}属性，禁用过渡动画直接切换轮播项，也能规避该异常：

  <Carousel slide={false}>
    {/* 原有轮播项代码不变 */}
  </Carousel>
  

内容的提问来源于stack exchange，提问作者André Karel