转换动画与jQuery可拖动之间的疯狂交互

Question

我有一个错误，其中jQuery draggable不能恢复到实际的初始位置（只需将其拖动几次，看看最终如何在屏幕外显示）：

const dragMe = $('#drag-me');
dragMe.draggable({
  revert: true
});

#container {
  width: 960px;
  height: 100%;
  position: relative;
}

#drag-me {
  position: fixed;
  z-index: 9999995;
  display: flex;
  justify-content: center;
  align-items: center;
  top: auto;
  left: 24px;
  bottom: 24px;
  width: 70px;
  height: 70px;
  background-color: white;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.25s ease, transform 1s cubic-bezier(.29, -0.73, .35, .7);
}

#drag-me:active {
  outline: none;
}

#drag-me:hover {
  -webkit-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.35);
  transform: rotate(90deg);
}

#drag-me img {
  display: block;
  height: 24px;
  width: 24px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="container">
  <a href="#" id="drag-me">
    <img src="https://img.icons8.com/android/2x/download-2.png">
  </a>
</div>

如果您看得足够快，则在某些时间间隔发生此错误似乎非常方便。所以我想“嗯，这与动画重叠有关”。

因此，我继续删除transition: box-shadow 0.25s ease, transform 1s cubic-bezier(.29, -0.73, .35, .7);行，然后...再次起作用。

我想念什么？ draggable是否在内部与transforms一起玩，我对此感到困惑？