Bootstrap 3.0水平折叠 - 在Chrome中弹出 [英] Bootstrap 3.0 Collapse Horizontally - Bounces in Chrome

问题描述

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

这种方法在Firefox和Firefox中运行良好。 Internet Explorer，但在Chrome中 show 有一个奇怪的反弹。 Chrome在 hide 上也没有任何转换。

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

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

CSS $ b

 ＃demo.width {
 height：auto; 
 -webkit-transition：宽度0.35s缓解; 
 -moz-transition：宽度0.35s易用性; 
 -o-transition：宽度0.35s缓解; 
过渡：宽度0.35s缓解; 
} 
  

HTML $ b

 < button type =buttonclass =btn btn-primarydata-toggle =collapsedata-target =＃demo> 
水平折叠
< / button> 
 
< div id =containerstyle =width：200px;> 
< div id =democlass =collapse in widthstyle =background-color：yellow;> 
< div style =padding：20px; overflow：hidden; width：200px;> 
这是我的内容
< / div> 
< / div> 
< / div> 
  

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

解决方案

我能够重现您的问题，但我发现的解决方案与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'， （在component-animations.less中） .join（''））]

less p>

  .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 ）

  .collapsing {
 position：relative; 
 height：0; 
 overflow：hidden; 
 -webkit-transition-property：高度，可视性; 
 transition-property：高度，可视性; 
 -webkit-transition-duration：0.35s; 
 transition-duration：0.35s; 
 -webkit-transition-timing-function：ease; 
转换定时功能：易用性; 
} 
 .collapsing.width {
 -webkit-transition-property：width，visibility; 
 transition-property：宽度，可视性; 
 width：0; 
 height：auto; 
} 
  

I'm following the instructions here (https://stackoverflow.com/a/18602739/2966090) to collapse an element horizontally in Bootstrap 3.0.2.

This method works fine in Firefox & Internet Explorer, but has a strange bounce on show in Chrome. Chrome also doesn't have any transition on hide.

I'm created a test with the behavior here: http://jsfiddle.net/eT8KH/1/

Here's the related code (also on 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>

Is there a way to fix this? Or is it a bug in Chrome?

解决方案

I was able to reproduce your problem, but the solution i found is not Chrome related.

I found some CSS code was missing and a little 'bug' in the plugin code. I have already wrote a PR to fix that, see: https://github.com/twbs/bootstrap/pull/15104

Demo: http://jsfiddle.net/zu5ftdjx/

To fix this issue in your current code:

in collapse.js: line 104 should become this.$element[dimension](this.$element[dimension]())[0][$.camelCase(['inner', dimension].join(''))]

less (in 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 (compiled output of the preceding Less code)

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

这篇关于Bootstrap 3.0水平折叠 - 在Chrome中弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！