为了更好地了解我想做什么,我有一把小提琴:
https://jsfiddle.net/tfisher9180/7efagjhj/1/
当你点击按钮3方块淡出,然后橙色方块立即捕捉,因为其他的缺席。
我想知道是否有一种方法可以使它看起来更流畅,这样橙色的盒子也可以向上滑动。

.square {transition: all 0.3s linear;}

这并不像我预料的那样奏效。
更新:
标记@anied作为与我一起工作并帮助定位的正确答案。不过,每个人的解决方案都很棒,效果很好。+一个为所有人,将不得不尝试几个看看哪个看起来最好!!!

最佳答案

因此,这里使用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');
      });
    }
  });
});

编辑(再次):实际上,现在我看到的一个问题是,在向上滑动框之后,顶部仍然保持高度。。。。根据你的要求,你可能也需要把它滑起来。。
编辑:
好的,上一次,修正了你的定位——我想这行得通:
$('#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>

10-05 20:38
查看更多