如何优化Bootstrap无JS多折叠语言切换的流畅度？

你当前通过Bootstrap 5.2.3的multi-collapse实现了无JS语言切换，但过渡生硬的问题可以通过Bootstrap自带的fade类解决，无需额外自定义JS或CSS，具体方案如下：

核心优化点 #

Bootstrap的collapse组件默认仅对高度变化做过渡，配合自带的fade类可以添加透明度过渡，让内容切换更平滑。同时需要处理内联元素的显示问题，避免切换时出现布局跳动。

修改后的代码示例 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.6/css/flag-icons.min.css">

<div class="col">
  <div class="card mb-4 rounded-3">
    <div class="card-header" id="PageSummary">
      <b class="textNL collapse multi-collapse fade show d-inline-block" aria-expanded="true">Samenvatting</b>
      <b class="textEN collapse multi-collapse fade d-inline-block" aria-expanded="false">Summary</b>
      <a id="flagEN" class="float-end" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-controls="flagNL flagEN collNL collEN textNL textEN" aria-expanded="true">
        <span class="collapse multi-collapse fade show fi-us">&nbsp;EN&nbsp;</span>
      </a>
      <a id="flagNL" class="float-end" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-controls="flagNL flagEN collNL collEN textNL textEN" aria-expanded="false">
        <span class="collapse multi-collapse fade fi-nl">&nbsp;NL&nbsp;</span>
      </a>
    </div>
    
    <div class="card-body">
      <div class="collapse multi-collapse fade show" id="collNL" aria-expanded="true">NL tekst komt hier.
      </div>
      
      <div class="collapse multi-collapse fade" id="collEN" aria-expanded="false">EN text will go here.
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

关键修改说明 #

• 给所有.multi-collapse元素添加fade类：Bootstrap会自动为其添加opacity属性的过渡动画，与collapse的高度过渡结合，实现内容从透明到显示、从显示到透明的平滑切换。
• 标题元素添加d-inline-block类：默认collapse会将元素转为display:block，导致标题切换时出现换行，d-inline-block保持标题在同一行内显示，避免布局跳动。
• 国旗切换的span元素同样添加fade类：让国旗图标的切换也同步拥有淡入淡出效果，保持整体交互一致性。

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