JS 淡入无法正常工作

Question

我现在已经搜索了大约 2 个小时，但我就是找不到这个。

我正在使用 bootstrap，我希望将 "col-xs-6" 的三列并排放置。但是，当我单击该按钮时，我希望可见的外部列折叠起来，而另一侧的列显示出来。中间的蓝色列根本不应该改变，只是外部列的可见性。我知道我可以只使用 display: none 但这看起来不像 CSS3 过渡那样平滑。

淡出效果非常好，但不是淡入，div 将在显示属性设置后立即处于 50% 宽度。

这是一个fiddle： Fiddle

这是代码：

HTML:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 red fadeIn">
      Hello i am the red div
    </div>
    <div class="col-xs-6 blue">
      Hello i am the blue div
    </div>
    <div class="col-xs-6 green fadeOut is-out">
      Hello i am the green div
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="pull-right">
        <button type="button" class="btn btn-danger">
          <span class="glyphicon glyphicon-plus"></span>&nbsp;TOGGLE
        </button>
      </div>
    </div>
  </div>
</div>

JS:

$('.btn').click(function(){
    var eleForFadeIn;
  var eleForFadeOut;
    if ($('.green').hasClass('is-out')){
    eleForFadeIn = $('.green');
    eleForFadeOut = $('.red');
  }
  else {
    eleForFadeIn = $('.red');
    eleForFadeOut = $('.green');
  }
  eleForFadeIn.addClass('fadeIn');
  eleForFadeIn.removeClass('fadeOut');
  eleForFadeOut.addClass('fadeOut');
  eleForFadeOut.removeClass('fadeIn');

  setTimeout(function() { doFadeIn(eleForFadeIn); }, 150);
  setTimeout(function() { doFadeOut(eleForFadeOut); }, 1500);
});

function doFadeIn(element){
  element.removeClass('is-out');
}
function doFadeOut(element){
    element.addClass('is-out');
}

CSS:

.red{
  background-color: red;
  height: 250px;
  -webkit-transition: width 2s;
  transition: width 2s;
}
.blue{
  background-color: blue;
  height: 250px;
}
.green{
  background-color: green;
  height: 250px;
  -webkit-transition: width 2s;
  transition: width 2s;
}
.fadeOut{
  width: 0px;
}
.fadeIn{
  width: 50%;
}

.is-out{
  display: none;
}

提前致谢！

编辑：使用超时函数是因为我希望在转换结束时显示属性为none。是的，我尝试在过渡事件监听器中构建，但它没有用......所以如果你知道如何实现 int，我将不胜感激任何建议:-)

Edit2: 试图更清楚地表达自己的目标。

Answer 1

您显示的 JSFiddle 没有生成三个相邻的列。无论如何，该列在淡出后占据宽度的 50% 的原因是因为它具有 class col-xs-6。此 class 使用 Bootstrap 的网格系统将元素的大小调整为可用水平 space.

的 6/12 == 1/2

如果你想要三个相邻的列，我建议使用 col-xs-4，因为 12/3 == 4。在淡出外面的两列之后。您应该将剩余的 class 调整为 col-xs-12 而不是 col-xs-4，这样它将占据整个水平宽度。

Answer 2

display:none 不能真正动画化，这就是你的问题所在。改成这样就好了

.is-out {
  visibility: hidden;
  padding: 0;
}

JS 淡入无法正常工作

JS fade in not working correctly

html

javascript

css

jquery

css-transitions