如何为Bootstrap 3中的impacted-element实现平滑向下移动效果

使用Bootstrap 3构建可折叠布局时，页面中的impacted-element元素向上移动时有平滑过渡效果，但向下移动时该效果缺失，如何让它像向上移动一样缓慢平滑地向下移动？

问题根源 #

1. 列元素使用min-height做过渡，但展开内容后，second-column的实际高度会超过min-height设定值，导致展开时min-height的过渡无法作用于实际高度变化，视觉上出现断层。
2. jQuery的slideToggle动画（默认400ms）和CSS过渡（350ms）时长不同步，加剧了动画不协调感。
3. impacted-element的CSS过渡规则未被实际触发（JS中未动态控制collapsed类），无法辅助实现平滑移动。

修复步骤 #

1. 移除jQuery的slideToggle，改用CSS类控制内容展开/收起，通过max-height实现平滑过渡，确保和列的动画时长统一。
2. 将first-column的min-height改为height并添加overflow: hidden，保证高度变化的过渡效果始终生效。
3. 统一所有动画时长为0.4s，让整体动画同步协调。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Two Column Layout with Background Image and Expand</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
  <style>
    .first-column {
      background-image: url("https://plus.unsplash.com/premium_photo-1688114984765-308599ec1e13?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80");
      background-size: cover;
      height: 300px;
      transition: height 0.4s ease;
      overflow: hidden;
    }
    .second-column {
      height: 300px;
      transition: height 0.4s ease;
      overflow: hidden;
    }
    .expanded .first-column,
    .expanded .second-column {
      height: auto;
      min-height: 500px;
    }
    .expanded-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }
    .expanded .expanded-content {
      max-height: 500px; /* 设置足够容纳内容的最大值 */
    }
    .impacted-element {
      transition: margin-top 0.4s ease; /* 确保元素位置变化有过渡 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row" id="expandableRow">
      <div class="col-md-6 first-column"></div>
      <div class="col-md-6 second-column">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum
          purus vel mauris ultrices, ac tincidunt risus interdum. Aenean at
          feugiat arcu. Nunc consectetur, nisi id venenatis suscipit, odio
          ipsum tincidunt ipsum, eu bibendum turpis lorem vel orci. In eu mi
          semper, varius quam nec, mattis odio. Vivamus venenatis odio nec
          libero egestas tincidunt. Nulla et sagittis mi, ut congue odio. Nam
          blandit mauris vitae lectus euismod, nec fermentum neque mattis.
        </p>
        <button id="expandBtn" class="btn btn-primary">Expand</button>
        <div class="expanded-content">
          <p>
            Pellentesque id tortor ipsum. Vivamus vitae ligula a massa
            vestibulum scelerisque. Duis congue eros a quam tincidunt, eu
            elementum sem eleifend. Proin suscipit, elit a sagittis laoreet,
            libero lectus fermentum nisl, quis gravida elit massa id elit.
            Fusce tristique, sem id iaculis consectetur, est nunc aliquam
            massa, id consectetur lorem odio sit amet neque. Proin elementum
            euismod varius. Nam laoreet odio eu elit dapibus vehicula. Integer
            ultricies lacus vel tristique finibus.
          </p>
        </div>
      </div>
    </div>
    <div class="impacted-element">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum
        purus vel mauris ultrices, ac tincidunt risus interdum. Aenean at
        feugiat arcu. Nunc consectetur, nisi id venenatis suscipit, odio ipsum
        tincidunt ipsum, eu bibendum turpis lorem vel orci. In eu mi semper,
        varius quam nec, mattis odio. Vivamus venenatis odio nec libero
        egestas tincidunt. Nulla et sagittis mi, ut congue odio. Nam blandit
        mauris vitae lectus euismod, nec fermentum neque mattis.
      </p>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function () {
      $("#expandBtn").click(function () {
        $("#expandableRow").toggleClass("expanded");
        // 切换按钮文字
        $(this).text($(this).text() === "Expand" ? "Collapse" : "Expand");
      });
    });
  </script>
</body>
</html>

说明 #

• 改用height+min-height结合的方式控制列高度，展开时先过渡到height:auto再通过min-height保证最低高度，收起时从内容高度过渡回300px。
• 用CSSmax-height过渡替代jQuery的slideToggle，让所有动画通过CSS实现，时长统一为0.4s，确保同步。
• 给impacted-element添加margin-top过渡，确保其位置变化时也有平滑效果。

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