jQuery UI sortable triggers css3 animation on sort

Question

I have a few sortables with CSS3 keyframe animations defined on them through a class. When sorting, I've noticed strange behaviour as seen in 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%);
  }
}

Initiating jQuery sortable.

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

The animation triggers on sort start and stop, while the animation class is not being reapplied. It's seems like there is some sort of reflow going on caused by jQuery modifying the DOM. But how does it keep triggering the animation, and can it be avoided? The goal is to have no animation at all when sorting, while keeping the class.

Answer: It makes sense, since the item we're dragging around is just a clone, it animates on start because we insert the clone to the DOM. The animation occurring on stop has the same cause, since the clone is then being append to it's new position, again triggering a reflow of the document.

Answer 1

I think, you need is remove the slideLeft class from li items after animation finish. Something like:

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

});

I hope to be useful.

PD.

When sorting a list, jquery-ui changes the DOM because the element is removed and inserted again. In addition jquery-ui creates another element with the same properties as placeholder, showing the place to move the element.

Then if you don't remove the slideLeft class, the animation will play with each change in the list