javascript - 如何通过动画显示正在排序的 HTML 元素

Question

这是我的片段:

.item {
  display:inline-block;
  width:120px;
  height:120px;
  border:1px solid red;
}

<div id="listing">
  <div data-value="5" class="item">item 5</div>
  <div data-value="3" class="item">item 3</div>
  <div data-value="2" class="item">item 2</div>
  <div data-value="1" class="item">item 1</div>
  <div data-value="4" class="item">item 4</div>
</div>

我想根据 data-value 属性的值对 div 进行排序，但我想使用动画显示正在重新排列的元素。我该怎么做？

Answer 1

以下是动画排序的方法:

1. 遍历所有元素并存储它们的位置
2. 将元素绝对定位在它们的原始位置
3. 获取将被替换的元素的位置，并为该位置设置动画。
4. (可选)动画完成后，您可能希望将绝对定位的元素替换为按排序顺序排列的常规元素，以便元素的 DOM 顺序正确。

function animateSort(parent, child, sortAttribute) {
  var promises = [];
  var positions = [];
  var originals = $(parent).find(child);
  var sorted = originals.toArray().sort(function(a, b) {
    return $(a).attr(sortAttribute) > $(b).attr(sortAttribute);
  });

  originals.each(function() {
    //store original positions
    positions.push($(this).position());
  }).each(function(originalIndex) {
    //change items to absolute position
    var $this = $(this);
    var newIndex = sorted.indexOf(this);
    sorted[newIndex] = $this.clone(); //copy the original item before messing with its positioning
    $this.css("position", "absolute").css("top", positions[originalIndex].top + "px").css("left", positions[originalIndex].left + "px");

    //animate to the new position
    var promise = $this.animate({
      top: positions[newIndex].top + "px",
      left: positions[newIndex].left + "px"
    }, 1000);
    promises.push(promise);
  });

  //instead of leaving the items out-of-order and positioned, replace them in sorted order
  $.when.apply($, promises).done(function() {
    originals.each(function(index) {
      $(this).replaceWith(sorted[index]);
    });
  });
}

$(function() {
  $("input").click(function() {
    animateSort("#listing", "div", "data-value");
  });
});

.item {
  display: inline-block;
  width: 120px;
  height: 120px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="Sort" />
<div id="listing">
  <div data-value="5" class="item">item 5</div>
  <div data-value="3" class="item">item 3</div>
  <div data-value="2" class="item">item 2</div>
  <div data-value="1" class="item">item 1</div>
  <div data-value="4" class="item">item 4</div>
</div>