javascript - JS 淡入无法正常工作

Question

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

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

淡出效果非常好，但不是淡入，而是在设置显示属性后，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;
}

提前致谢!

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

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

Answer 1

display:none 不能真正被动画化，这就是你的问题所在。把它改成这个，一切都会好起来的。

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