Bootstrap 3.0水平折叠 – 在Chrome中弹跳

我按照这里的说明（ https://stackoverflow.com/a/18602739/2966090 ）在Bootstrap 3.0.2中水平折叠元素。

这种方法在Firefox和Internet Explorer中运行良好，但在Chrome中显示出奇怪的反弹。 Chrome也没有任何隐藏转换。

我用这里的行为创建了一个测试： 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

  Horizontal Collapsible  
 
 
 Here is my content 
 
  

有没有办法来解决这个问题？ 或者它是Chrome中的错误？

Answer 1

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

我发现一些CSS代码丢失了，插件代码中有一些“bug”。 我已经写了一个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(''))]

少 （在组件 – 动画。无）

 .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; }