Javascript JS淡入无法正常工作

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

我使用的是bootstrap，我希望有三列“col-xs-6”彼此相邻。但是，当我单击该按钮时，我希望可以看到的外柱收拢并显示另一侧的柱。中间的蓝色柱根本不应该改变，只是外柱的可见性。 我知道我可以只使用

display:none

，但这看起来不像CSS3转换那样平滑

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

这是一把小提琴：

代码如下：

HTML:

CSS:

提前谢谢

编辑：使用超时函数是因为我希望在转换结束时显示属性为“无”。是的，我尝试在transition eventlistener中构建，但没有成功。。。因此，如果您知道如何实现int，我将非常感谢您的建议：-）

---

Edit2：试图更清楚地表达我的目标。

您展示的JSFIDLE不会产生三个相邻的列。不管怎样，淡出后列占据50%宽度的原因是因为它具有类

col-xs-6

。此类使用引导的网格系统将元素的大小调整为可用水平空间的6/12==1/2

---

如果需要三个相邻的列，我建议使用

col-xs-4

，因为12/3==4。淡出外两列后。您应该将其余一个的类调整为

col-xs-12

而不是

col-xs-4

，这样它将占据整个水平宽度。

显示：没有一个不能真正设置动画，这就是问题所在。换成这个，一切都会好起来的

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

---

请看，那里的共识是“不，他们不应该”！如果您使用的是超时，那么为什么还要麻烦使用css转换，为什么不直接使用jquery来实现这个效果呢？（也许我很天真）6+6+6=18，而不是12。bootstrap总是12列（这是我不喜欢它的原因之一…但这只是我的偏好）我真的不想让3列挨在一起，我想我没有说清楚。我希望其中一个专栏完全消失！我只想使用JQuery来触发一些东西。我想尽可能地使用CC3，因为我觉得它更平滑一些。无论如何谢谢：-）你好，我想我没有把我想要的写清楚。我会修改我的问题，这样我的目标会变得更加明显。

$('.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');
}

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

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