如何为Bootstrap Tabs按钮添加cubic-bezier切换动画？

问题描述 #

需要为Bootstrap 5垂直Tabs组件实现类似参考示例中的弹性切换动画（通过cubic-bezier过渡实现），直接为.nav-link添加transition属性未达到预期效果。

实现思路 #

参考示例通过独立的.selector元素作为动态背景实现弹性动画，我们将该思路适配到垂直Tabs：

• 为Tabs容器添加相对定位，作为动画背景元素的定位父级
• 创建自定义动画背景元素，初始位置与激活Tab对齐
• 监听Bootstrap Tab切换事件，动态更新背景元素的top和height属性
• 为背景元素设置带弹性曲线的transition属性

完整实现代码 #

HTML（整合Bootstrap结构与自定义元素） #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3 v-tabs-container" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <!-- 弹性动画背景元素 -->
    <div class="tab-selector"></div>
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">Home</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">Profile</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">Messages</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">Settings</div>
  </div>
</div>

CSS（自定义样式与动画） #

/* 垂直Tabs容器设置相对定位 */
.v-tabs-container {
  position: relative;
}

/* 弹性动画背景元素样式 */
.tab-selector {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border-radius: 0.375rem;
  background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
  transition: top 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), height 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 0;
}

/* 调整Tab按钮层级，确保文字在背景上方 */
.v-tabs-container .nav-link {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
  border: none !important;
}

/* 激活状态的文字颜色 */
.v-tabs-container .nav-link.active {
  color: #fff !important;
}

JavaScript（初始化与事件监听） #

document.addEventListener('DOMContentLoaded', function() {
  const tabContainer = document.querySelector('.v-tabs-container');
  const selector = tabContainer.querySelector('.tab-selector');
  const activeTab = tabContainer.querySelector('.nav-link.active');

  // 更新动画背景元素的位置和高度
  function updateSelector(targetTab) {
    const rect = targetTab.getBoundingClientRect();
    const containerRect = tabContainer.getBoundingClientRect();
    const top = rect.top - containerRect.top;
    selector.style.top = `${top}px`;
    selector.style.height = `${rect.height}px`;
  }

  // 初始化背景元素位置
  updateSelector(activeTab);

  // 监听Tab切换事件
  tabContainer.addEventListener('shown.bs.tab', function(e) {
    updateSelector(e.target);
  });
});

关键说明 #

• 垂直布局下，将水平示例的left/width过渡改为top/height过渡，适配垂直方向动画
• 使用Bootstrap官方shown.bs.tab事件，确保Tab完全激活后再更新背景位置
• 通过getBoundingClientRect()计算相对位置，避免布局偏移问题
• 调整.nav-link的z-index，保证文字始终在动画背景上方

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