jQuery 可排序。点击动画排序

Question

我有一个可排序列表，通过单击特定按钮，li 元素会在列表中向上或向下移动。我已经这样做了，但我需要它随着动画上升或下降。我想我的方法并不是很好。

代码如下：

$(function() {
    $( "#sortablemain" ).sortable({
 axis: "y",
    opacity: 1,
    scrollSpeed: 0,
    scroll: true,
    scrollSensitivity: 1000,
    helper: 'clone',
 tolerance: 'pointer',
 sort: function() {
  return false;
 }
    }).disableSelection().on("click",".uk-icon-arrows-v", function() {
        li = $(this).closest("li");
 if ($(this).attr("id") == "up"){
     var liPrev = li.prev();
  if (liPrev.length != 0){
      var liTMP = $('<div>').append($(li).clone()).html();
      li.detach();
      liPrev.before(liTMP);
  }
 } else {
     liNext = li.next();
     if (liNext.length != 0) {
                var liTMP = $('<div>').append($(li).clone()).html();
  li.detach();
  liNext.after(liTMP);
     }
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

更新：HTML 有点大。如果您愿意，可以在这里看到它：http://wdgroup.eu/newves/。向下滚动到彩色标签，它们是我想要动画的 li

Answer 1

您当前使用的是 detach()，它在移除元素时不添加动画。您当然可以使用 slideup and slidedown 来切换元素的可见性。

或者您可以只执行 slideup(200).detach() 并且您将拥有一个动画。

如果你想自定义过渡，尽管你总是可以使用像 TRANSIT.JS 这样的库，它重写了 [=22= 中如何完成过渡].

Answer 2

使用css做到了。向所有选项卡添加了一个转换规则，并在分离和附加之前单击我移动它们

li.css("transform","translate3d(0,-310px,0)");
liPrev.css("transform","translate3d(0,310px,0)");

和

li.css("transform","translate3d(0,310px,0)");
liNext.css("transform","translate3d(0,-310px,0)");

jQuery 可排序。点击动画排序

jQuery sortable. Sort on click with animation

jquery

animation

jquery-ui-sortable