jquery - 使用 Bootstrap 4 横向折叠列(不稳定的过渡/动画问题)

Question

所以在最简单的形式中，我有一个 Bootstrap 4 网站，我正试图利用它的折叠实用程序来横向折叠我的两列之一。我让它工作，但不幸的是，过渡使 div 从上到下动画化，导致笨拙的效果 - 我需要它从右到左动画(反之亦然)。

请查看下面我的代码和 JsFiddle 示例:

  <div class="container" style="margin-top: 20px">
    <div class="row">
      <div id="left-content" class="col-5 border collapse show">
        Collapsible Area
      </div>
      <div class="col border border-primary">
      <p>
        Variable width content
      </p>
      <a class="btn btn-primary" data-toggle="collapse" data-target="#left-content">Toggle Collapse</a>
    </div>
  </div>

https://jsfiddle.net/7wuudd64/6/

Answer 1

如果您将 CSS 过渡添加到您的 #left 容器，它可以减轻效果。

.col-5.border.collapse {
    transition: height 1s ease; 
}

示例:https://jsfiddle.net/7wuudd64/12/

如果我的回答确实有助于解决您的问题，我将不胜感激，谢谢。