Безумное взаимодействие между анимацией трансформации и перетаскиванием jQuery - PullRequest
Новая
       31

Безумное взаимодействие между анимацией трансформации и перетаскиванием jQuery

1 голос
/ 12 февраля 2020

У меня есть ошибка, из-за которой 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, и я путаю его?

...