如何为Bootstrap 5.3的激活tab-pane添加淡出效果？

Bootstrap默认的fade类仅对新激活的tab面板实现淡入，要实现当前激活面板先淡出，再淡入新面板的效果，无需重写整个tab机制，利用Bootstrap自带的tab事件钩子即可完成，以下是标准实现方案：

核心思路 #

通过监听Bootstrap tab组件的show.bs.tab事件（切换前触发），拦截默认切换流程：

1. 阻止默认的即时切换行为
2. 让当前激活的tab面板执行淡出动画
3. 等待淡出动画完成后，再手动触发新tab的切换，此时新面板会自动执行淡入动画

完整代码示例 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Home Content</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Profile Content</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Contact Content</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const tabList = document.getElementById('pills-tab');
  let isSwitching = false; // 防止动画过程中重复触发

  tabList.addEventListener('show.bs.tab', function(e) {
    if (isSwitching) return;
    
    // 获取当前激活的tab面板
    const activePane = document.querySelector('.tab-pane.active');
    if (!activePane || !activePane.classList.contains('fade')) return;

    // 阻止默认切换行为
    e.preventDefault();
    isSwitching = true;

    // 移除show类，触发淡出动画
    activePane.classList.remove('show');

    // 监听动画结束事件，确保淡出完成后再切换
    const onTransitionEnd = function() {
      activePane.removeEventListener('transitionend', onTransitionEnd);
      // 手动触发目标tab的切换
      e.target.click();
      isSwitching = false;
    };

    activePane.addEventListener('transitionend', onTransitionEnd);
    
    // 兼容动画不触发transitionend的情况（比如元素本来就不可见）
    setTimeout(onTransitionEnd, 300); // Bootstrap默认fade动画时长是300ms
  });
});
</script>

关键细节说明 #

• 事件拦截：show.bs.tab事件在tab切换动作触发前执行，通过e.preventDefault()阻止默认的即时切换，从而插入淡出流程。
• 动画时序控制：利用transitionend事件监听淡出动画的结束，确保新tab的淡入在淡出完成后才开始；同时设置300ms的超时兜底，避免因特殊情况导致动画无响应。
• 状态锁isSwitching：防止在动画过程中重复触发切换事件，避免出现异常的动画叠加。
• 兼容性：完全基于Bootstrap原生API实现，无需引入jQuery或第三方插件，符合Bootstrap的设计规范。

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