Question

我现在已经搜索了大约2个小时，但我无法控制住这个。

我正在使用bootstrap，我希望有三列＆＃34; col-xs-6＆＃34;彼此相邻。但是，当我单击按钮时，我希望可见的外部列折叠并显示另一侧的列。中间的蓝色列根本不应该改变，只是外部列的可见性。我知道我可以使用display: none，但这看起来不像CSS3 Transition那样流畅。

淡出效果非常好，但是在显示属性设置之后，div不会淡入，而是只有50％的宽度。

这是一个小提琴： 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;
}

提前致谢！

编辑：使用超时功能，因为我希望在转换结束时display属性为none。是的我试图建立过渡事件监视器，但它没有工作......所以如果你知道如何实现int我会感激任何建议： - ）

Edit2 ：试图表达自己对目标的更加谨慎。

Answer 1

显示：无法真正动画，这就是你的问题所在。改变它，一切都应该好。

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

Answer 2

您展示的JSFiddle不会产生三个相邻的列。无论如何，在淡出之后列占据宽度的50％是因为它具有类col-xs-6。该类使用Bootstrap的网格系统将元素大小调整为可用水平空间的6/12 == 1/2。

如果你想要三个相邻的列，我建议使用col-xs-4，因为12/3 == 4.淡出外面的两列。您应该将剩余的一个类调整为col-xs-12而不是col-xs-4，以便占用整个水平宽度。

JS淡入效果不正常

2 个答案: