Bootstrap轮播：居中卡片的平滑高度过渡实现问题

核心思路 #

放弃JS动态计算设置高度的方式，改用CSS过渡+轮播事件触发类切换的方案，让浏览器原生处理过渡动画，避免JS操作导致的过渡失效问题。

步骤实现 #

1. 调整HTML结构

保证每个轮播项（carousel-item）内的5张卡片结构一致，方便定位居中的第3张卡片：

<div id="cardCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="row g-3">
        <div class="col-md-2.4 card">卡片内容1</div>
        <div class="col-md-2.4 card">卡片内容2</div>
        <div class="col-md-2.4 card center-card">卡片内容3</div>
        <div class="col-md-2.4 card">卡片内容4</div>
        <div class="col-md-2.4 card">卡片内容5</div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row g-3">
        <div class="col-md-2.4 card">卡片内容6</div>
        <div class="col-md-2.4 card">卡片内容7</div>
        <div class="col-md-2.4 card center-card">卡片内容8</div>
        <div class="col-md-2.4 card">卡片内容9</div>
        <div class="col-md-2.4 card">卡片内容10</div>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#cardCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">上一页</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#cardCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">下一页</span>
  </button>
</div>

2. 编写CSS过渡规则

给所有卡片添加过渡属性，定义居中卡片的高度样式：

/* 基础卡片样式 */
.card {
  min-height: 200px; /* 用min-height适配内容高度，也可改用固定height */
  transition: min-height 0.3s ease-in-out; /* 过渡时长可按需调整 */
  overflow: hidden; /* 防止内容溢出 */
}

/* 居中卡片的高度样式 */
.card.center-card {
  min-height: 220px; /* 比基础高度高20px，数值可自定义 */
}

/* 确保中等屏幕下5张卡片均匀排列 */
@media (min-width: 768px) {
  .col-md-2.4 {
    flex: 0 0 auto;
    width: calc(100% / 5); /* 替代自定义的2.4类，布局更稳定 */
  }
}

3. 绑定轮播切换事件

利用Bootstrap Carousel的slid.bs.carousel事件（切换完成后触发），动态给当前轮播项的居中卡片添加类，移除上一轮播项的类：

const carouselEl = document.getElementById('cardCarousel');

carouselEl.addEventListener('slid.bs.carousel', function(e) {
  // 移除所有卡片的center-card类
  document.querySelectorAll('.card.center-card').forEach(card => {
    card.classList.remove('center-card');
  });
  // 给当前激活轮播项里的第3张卡片添加类
  const currentActiveItem = e.relatedTarget;
  currentActiveItem.querySelector('.row .col-md-2.4:nth-child(3)').classList.add('center-card');
});

为什么之前的方法失效？ #

用JS直接计算并设置高度时，DOM更新速度快于过渡动画触发时机，浏览器会直接跳转到目标高度，不会渲染过渡过程。而CSS类切换的方式，浏览器会自动识别属性变化并执行预设的过渡动画，完美解决平滑过渡问题。

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