javascript - jQuery UI sortable 在排序时触发 css3 动画

Question

我有一些 sortables，它们通过一个类定义了 CSS3 关键帧动画。排序时，我注意到在 this Fiddle. 中看到的奇怪行为

.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

我认为，您需要在动画完成后从 li 项目中删除 slideLeft 类。像这样的东西:

$(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 会创建另一个与 placeholder 具有相同属性的元素，显示移动元素的位置。

然后如果你不删除 slideLeft 类，动画将随着列表中的每个变化播放