Bootstrap 3.0 水平折叠 - 在 Chrome 中反弹答案

【问题标题】：Bootstrap 3.0 Collapse Horizontally - Bounces in ChromeBootstrap 3.0 水平折叠 - 在 Chrome 中反弹
【发布时间】：2013-11-19 13:24:01
【问题描述】：

我正在按照此处 (https://stackoverflow.com/a/18602739/2966090) 的说明在 Bootstrap 3.0.2 中水平折叠元素。

此方法在 Firefox 和 Internet Explorer 中运行良好，但在 Chrome 中的 show 中出现奇怪的反弹。 Chrome 在 hide 上也没有任何过渡。

我在这里创建了一个行为测试：http://jsfiddle.net/eT8KH/1/

这是相关代码（也在 jsfiddle 上）：

CSS

#demo.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

HTML

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
    Horizontal Collapsible
</button>

<div id="container" style="width:200px;">
    <div id="demo" class="collapse in width" style="background-color:yellow;">
        <div style="padding: 20px; overflow:hidden; width:200px;">
            Here is my content
        </div>
    </div>
</div>

有没有办法解决这个问题？还是 Chrome 中的错误？

【问题讨论】：

您正在复制的演示代码中的 jsfiddle 在 chrome 中也不起作用。这是一个简单的使用切换，而不是我认为可以实现您的目标：webskee.com/js/animated-toggle
感谢您的帮助，马特。这可能行得通，尽管我希望有一种方法可以使用 Bootstrap 提供的功能。如果我不能，那么我可能不得不这样做。

标签： jquery google-chrome twitter-bootstrap-3 collapse

【解决方案1】：

我能够重现您的问题，但我找到的解决方案与 Chrome 无关。

我发现插件代码中缺少一些 CSS 代码和一个小“错误”。我已经写了一个 PR 来解决这个问题，请参阅：https://github.com/twbs/bootstrap/pull/15104

演示：http://jsfiddle.net/zu5ftdjx/

要在您当前的代码中解决此问题：

在collapse.js 中：第 104 行应该变成this.$element[dimension](this.$element[dimension]())[0][$.camelCase(['inner', dimension].join(''))]

less（在 component-animations.less 中）

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  .transition-property(~"height, visibility");
  &.width {
  .transition-property(~"width, visibility");
  width:0;
  height:auto;
  }
  .transition-duration(.35s);
  .transition-timing-function(ease);
}

css（前面的 Less 代码的编译输出）

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

【讨论】：