JS淡入无法正常工作答案

【问题标题】：JS fade in not working correctlyJS淡入无法正常工作
【发布时间】：2016-03-19 20:08:57
【问题描述】：

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

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

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

提前致谢！

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

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

【问题讨论】：

请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”！
如果您使用超时，那么为什么还要使用 css 转换，为什么不直接使用 jquery 来实现效果呢？（也许我很天真）
6+6+6=18，而不是 12。引导程序总是 12 列（我非常不喜欢它的布局的原因之一......但这只是偏好）
我真的不想要 3 列彼此相邻，我想我没有说得足够清楚。我希望其中一列完全消失！我只想使用 JQuery 来触发东西。我想尽可能使用 CC3，因为我认为它更流畅一些。无论如何谢谢:-)

标签： javascript jquery html css css-transitions

【解决方案1】：

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

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

【讨论】：

你好Hexturtle，我想我写的东西不够清楚。我将编辑我的问题，这样我的目标就会变得更加明显。

【解决方案2】：

display:none 不能真正设置动画，这就是您的问题所在。改成这个就好了。

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

【讨论】：