jQuery UI draggable with css transition

Question

I'm trying to have jQueryUI's draggable on my element:

html:

<div class="draggable"></div>

js:

$('.draggable').draggable();

Until now everything works ok, but when I add css material design styles:

.draggable {
  position: absolute;
  width: 100px;
  height: 50px;
  background-color: red;

  -webkit-transition: all 250ms;
  -moz-transition: all 250ms;
  transition: all 250ms;
}

.draggable:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  transform: translateY(-2px);
}

div element starts to work in a wrong way - it is locking every some time.

Here's plunker: http://plnkr.co/edit/ovElSXyYHCioitcIcup9?p=preview

Answer 1

I found solution thanks to Tom suggestion:

var memo;
$('.draggable').draggable({
  start: function() {
    memo = $(this).css('transition');
    $(this).css('transition', 'none');
  },
  stop: function() {
    $(this).css('transition', memo);
  }
});

Plunker: http://plnkr.co/edit/ovElSXyYHCioitcIcup9?p=preview

Answer 2

My guess is that it needs both the start and end point to do a transition so it is only displayed when it thinks the movement has finished.

I know this isn't an answer but I can't comment yet, sorry.