javascript - 使用 jQuery 在淡出( fiddle )之后为 DIV 的重新定位设置动画？

Question

为了更好地了解我要做什么，我有这个 fiddle :

https://jsfiddle.net/tfisher9180/7efagjhj/1/

当您单击按钮时，3 个方 block 会淡出，然后橙色方 block 会立即消失，因为其他方 block 不存在。

我想知道是否有办法让它看起来更流畅，以便橙色框也向上滑动。

.square {transition: all 0.3s linear;}

这并没有像我预期的那样工作。

更新:

将@anied 标记为与我一起工作并帮助修复定位的正确答案。每个人的解决方案都很棒，而且效果很好。为所有人 +1，必须尝试一些，看看哪个看起来最好!!!

Answer 1

因此，这里使用 CSS 过渡的问题在于，当周围的框消失时，橙色框的 CSS 属性不会发生变化——它只是根据变化重新流到 DOM 中的新位置这些其他框的显示属性。我认为，如果您想让它起作用，您将不得不编写一段自定义的 jQuery 代码，使框淡出但不会立即隐藏它们，而是将它们向上滑动并消失。

尝试这样的事情:

$('#sort').on('click', function() {
  $('.square').each(function() {
    if (!$(this).hasClass('square-orange')) {
      $(this).animate({'opacity' : 0}, 400, 'swing', function () {
          $(this).slideUp();
      });
    }
  });
});

编辑: 关于跳过 - 不太确定，但我尝试用自定义替换替换 slideUp 并且它似乎解决了它:

$('#sort').on('click', function() {
  $('.square').each(function() {
        if (!$(this).hasClass('square-orange')) {
        $(this).animate({'opacity': 0}, 400, 'swing', function() {
            $(this).animate({'height': 0}, 400, 'swing');
      });
    }
  });
});

编辑(再次):实际上，现在我看到一个问题是顶部 .row 仍然在向上滑动的框之后保持高度......你可能需要滑动这也取决于您的要求..

编辑:

好的，上次，稍微调整一下你的位置——我认为这可行:

$('#sort').on('click', function() {
  $('.square').each(function() {
		if (!$(this).hasClass('square-orange')) {
    	$(this).animate({'opacity': 0}, 400, 'swing', function() {
      	$(this).animate({'height' : 0}, 400, 'swing');
      });
    }
  });
});

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.row {
  display: block;
  clear: both;
}
.square {
  width: 60px;
  height: 60px;
  display: block;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.square-red {
  background-color: red;
}

.square-blue {
  background-color: blue;
}

.square-orange {
  background-color: orange;
}

.square-purple {
  background-color: purple;
}

#sort {
  margin-top: 30px;
  background-color: #414141;
  border: 0;
  color: #f2f2f2;
  padding: 10px 15px;
  cursor: pointer;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row row-top clearfix">
    <div class="square square-red"></div>
    <div class="square square-blue"></div>
  </div>
  <div class="row row-bottom clearfix">
    <div class="square square-orange"></div>
    <div class="square square-purple"></div>
  </div>
</div>

<button id="sort">Sort Orange</button>