Bootstrap carousel轮播幻灯片平滑过渡实现方法

过渡卡顿、不流畅是4个核心问题导致的，对应修复即可：

• 位移值计算错误：桌面端单屏展示3张卡片，单张宽度占33.333%，原有代码写的25%位移量和卡片实际宽度不匹配，切换时会出现视觉跳变
• 缺失过渡规则：只定义了transform的起止状态，没有给轮播项声明transition过渡属性，浏览器无法平滑渲染中间动画帧
• 执行时机错误：节点克隆逻辑在DOM未完全加载时执行，首次切换会因为节点未渲染完成出现卡顿，且没有开启硬件加速，动画容易触发主线程重排掉帧
• CSS优先级不足：自定义的transform值会被Bootstrap默认的轮播样式覆盖，导致动画逻辑错乱

具体修复步骤 #

1. 修正CSS样式，替换原有对应片段：

/* 修复原card类的border语法错误 */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    margin: 10px;
}

/* 给轮播项添加基础过渡配置，开启硬件加速 */
#sessionContainer .carousel .carousel-item {
    transition: transform 0.6s ease-in-out;
    will-change: transform;
    backface-visibility: hidden;
}

/* medium and up screens */
@media (min-width: 768px) {
    /* 修正位移值为33.333%，匹配3张卡片的宽度占比 */
    #sessionContainer .carousel-inner .carousel-item-end.active,
    #sessionContainer .carousel-inner .carousel-item-next {
        transform: translateX(33.333%);
    }

    #sessionContainer .carousel-inner .carousel-item-start.active,
    #sessionContainer .carousel-inner .carousel-item-prev {
        transform: translateX(-33.333%);
    }

    #sessionContainer .card img {
        width: 98%;
    }

    #sessionContainer .carousel-item {
        justify-content: space-between;
    }
}

/* 提升样式优先级，覆盖Bootstrap默认位移规则 */
#sessionContainer .carousel-inner .carousel-item-end,
#sessionContainer .carousel-inner .carousel-item-start {
    transform: translateX(0);
}

2. 修正JS逻辑执行时机，把节点克隆逻辑放到DOM加载完成后执行，同时修正Bootstrap5轮播初始化方式（原有代码混用了jQuery和原生BS5 API，容易出现实例异常）：

$(document).ready(function () {
  // DOM就绪后再执行多卡片节点克隆
  const sessions = document.querySelectorAll('#sessionContainer .carousel .carousel-item');
  sessions.forEach((el) => {
    const minPerSlide = 3
    let next = el.nextElementSibling
    for (var i = 1; i < minPerSlide; i++) {
      if (!next) {
        // 循环轮播取第一个节点克隆
        next = sessions[0]
      }
      let cloneChild = next.cloneNode(true)
      el.appendChild(cloneChild.children[0])
      next = next.nextElementSibling
    }
  })
  // 用BS5原生API初始化轮播，避免jQuery版本兼容问题
  const sessionCarousel = new bootstrap.Carousel('#sessionCarousel', {
    interval: false,
    touch: true
  });
  sessionCarousel.pause();
});

替换完成后重启页面，轮播切换就会和Bootstrap原生过渡一样流畅，不会出现跳帧、卡顿的问题。

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