Question

所以在它最简单的形式下，我有一个Bootstrap 4网站，并且我试图利用它的崩溃实用程序将我的两个列中的一个横向折叠。我有它工作，但不幸的是过渡是从上到下动画div导致一个笨重的效果 - 我需要它从右到左动画（反之亦然切换）。

请参阅下面的代码＆amp; 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

如果您向#left容器添加CSS转换，则可以减轻效果。

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

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

使用Bootstrap 4向侧面折叠列（生涩的过渡/动画问题）

1 个答案: