我有一个错误,其中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
一起玩,我对此感到困惑?