jQuery UI sortable触发css3动画排序

Question

我有一些可排序的CSS3关键帧动画通过类定义.排序时,我注意到这个小提琴中的奇怪行为.

.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;    

  animation-duration: 1s;   
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;   
  -webkit-animation-timing-function: ease-in-out;       

  visibility: visible !important;   
}

@keyframes slideLeft {
  0% {
     transform: translateX(150%);
  }
  50%{
    transform: translateX(-8%);
  }
  65%{
    transform: translateX(4%);
  }
  80%{
    transform: translateX(-4%);
  }
  95%{
    transform: translateX(2%);
  }         
  100% {
    transform: translateX(0%);
  }
}

启动jQuery可排序.

$(function() {
  $( "#sortable" ).sortable();
});

动画触发的排序start和stop,而动画类没有被重新应用.似乎有一些由jQuery修改DOM引起的重排.但它如何继续触发动画,是否可以避免？目标是在排序时根本没有动画,同时保持课程.

答:这是有道理的,因为我们拖动的项目只是一个克隆,它会动画,start因为我们将克隆插入到DOM中.发生的动画stop具有相同的原因,因为克隆随后被附加到它的新位置,再次触发文档的重排.

Answer 1

我想,你需要slideLeft在动画结束后从li项中删除该类.就像是:

$(function(){
    $( "#sortable" ).sortable();
    //one second later the slideLeft class  is removed from each li.
    window.setTimeout(function(){
      $( "#sortable" ).find(".slideLeft").removeClass("slideLeft");
    }, 1000)

});

我希望有用.

PD.

排序列表时,jquery-ui会更改DOM,因为该元素已被删除并再次插入.此外,jquery-ui创建另一个具有与占位符相同属性的元素,显示移动元素的位置.

然后,如果不删除slideLeft该类,则动画将随列表中的每个更改一起播放