如何为Bootstrap的collapse类添加线性过渡效果？

你的问题出在两个关键地方：一是折叠容器缺少Bootstrap Collapse组件必需的collapse类，二是没有针对组件过渡阶段的样式做针对性修改。

修复步骤 #

1. 补全组件基础类：给折叠内容容器加上collapse类，这是Bootstrap触发折叠过渡逻辑的前提。
2. 替换过渡曲线：Bootstrap默认使用ease缓动曲线，需要针对组件过渡时的.collapsing类，将过渡函数改为linear。

修改后的完整代码 #

HTML（仅调整折叠容器部分）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <link rel="stylesheet" href="style2.css">
  <title>Collapse</title>
</head>
<body>
  <div class="my-container">
    <button
      class="btn btn-primary"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapseExample"
      aria-expanded="false"
      aria-controls="collapseExample"
    >
      Button with data-bs-target
    </button>
    <!-- 新增collapse类 -->
    <div class="collapse collapseExample" id="collapseExample">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores dolore quas nisi iste rerum, perferendis a
        quod enim aspernatur quam facilis unde reprehenderit. Fugit animi repellendus blanditiis nam ducimus dolorum!
      </p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores dolore quas nisi iste rerum, perferendis a
        quod enim aspernatur quam facilis unde reprehenderit. Fugit animi repellendus blanditiis nam ducimus dolorum!
      </p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores dolore quas nisi iste rerum, perferendis a
        quod enim aspernatur quam facilis unde reprehenderit. Fugit animi repellendus blanditiis nam ducimus dolorum!
      </p>
    </div>
    <div class="activies">
      <h1>Activies</h1>
      <div class="table-scroll">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Animal</th>
              <th scope="col">Age</th>
              <th scope="col">Weight</th>
              <th scope="col">Distance</th>
              <th scope="col">Link</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td>
                <a href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                    class="bi bi-link-45deg" viewBox="0 0 16 16">
                    <path
                      d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z">
                    </path>
                    <path
                      d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z">
                    </path>
                  </svg>
                </a>
              </td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td>
                <a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td>
                <a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td>
                <a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td>
                <a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
    crossorigin="anonymous"></script>
</body>
</html>

CSS（修改过渡相关样式）

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: lightblue;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-container {
    background-color: white;
    display: flex;
    flex-direction: column;
    height: 60vh;
    width: 80vw;
}

/* 针对过渡阶段的容器设置线性动画 */
#collapseExample.collapsing {
  transition: height 1s linear !important;
}

#collapseExample {
    background-color: red;
}

.activies {
    position: relative;
    overflow: auto;
}

原理说明 #

Bootstrap Collapse组件在展开/收起过程中，会自动给容器添加.collapsing类，通过这个类控制height属性的过渡动画。直接给目标容器加transition不会生效，必须针对.collapsing状态修改过渡曲线，才能替换掉默认的缓动效果。

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