CSS动画元素在触摸移动转换后在错误的位置上动画。
CSS动画元素在触摸移动转换后在错误的位置上动画。
提问于 2022-07-07 10:12:25
我使用CSS来定义一个具有特定类的球动画。这很好，当添加类点击，球只是跳在一个地方。
但是，当我使用触移/鼠标拖动和转换移动球后添加类时，球会跳到原来的位置，而不是移动到它的新位置。
有什么办法，我可以让球跳到新的位置，但仍然保持良好的跳跃动画在CSS？
如果你在看这个的话，谢谢。
小提琴：https://jsfiddle.net/9bvucd3q/
这里的代码：
<html>
<head>
<!--<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
user-scalable=no" />
<title>Drag/Drop/Bounce</title>-->
<style>
#item {
width: 100px;
height: 100px;
background-color: rgb(245, 230, 99);
border: 10px solid rgba(136, 136, 136, .5);
border-radius: 50%;
touch-action: none;
user-select: none;
position: absolute;
}
.bugout{animation: card-out 0.6s cubic-bezier(.8,.2,.1,0.8);}
@keyframes card-out {
0% { z-index: 20; transform: translateY(0%) rotate(0deg); }
5% { z-index: 20; transform: translateY(-5%) rotate(-4deg); }
49% { z-index:20;transform: translateY(-120%) ; }
100% { z-index:5;transform: translateY(-120%) ; }
}
#box1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<h1>Drag and Drop</h1>
<div id="item"></div>
<div id="box1">
</div>
<script>
var dragItem = document.querySelector("#item");
var box1 = document.querySelector("#box1");
var container = dragItem;
//Declare Variables
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
//Add Event Listeners for Touchscreens
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
//Add Event Listeners for Mice
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) { //when the drag starts
if (e.type === "touchstart") { //if its a touchscreen
initialX = e.touches[0].clientX - xOffset; //set initial x-cordinate to where it was before drag started
initialY = e.touches[0].clientY - yOffset; //set initial y-cordinate to where it was before drag started
} else { //if its not a touchscreen (mouse)
initialX = e.clientX - xOffset; //set initial x-cordinate to where it was before drag started
initialY = e.clientY - yOffset; //set initial y-cordinate to where it was before drag started
}
if (e.target === dragItem) { //if user is dragging circle
active = true; //the drag is active
dragItem.classList.remove('bugout');
}
}
function dragEnd(e) { //when the drag ends
const box1Size = box1.getBoundingClientRect(); //the size of box1
const elementSize = dragItem.getBoundingClientRect(); //the size of the circle
if (elementSize.left >= box1Size.left && elementSize.right <= box1Size.right && elementSize.top >= box1Size.top && elementSize.bottom <= box1Size.bottom) { //if the circle is in box1
initialX = currentX; //set the initial x-cordinate to where it is now
initialY = currentY; //set the initial y-cordinate to where it is now
dragItem.classList.add('bugout');
}
else { //if the circle is in neither box1 nor box2
currentX = 0;
currentY = 0;
initialX = 0;
initialY = 0;
xOffset = 0;
yOffset = 0;
setTranslate(0, 0, dragItem);
}
active = false; //the drag is no longer active
}
function drag(e) { //when the circle is being dragged
if (active) { //if the drag is active
e.preventDefault(); //the user cant do anything else but drag
if (e.type === "touchmove") { //if its a touchscreen
currentX = e.touches[0].clientX - initialX; //set current x-cordinate to where it is now
currentY = e.touches[0].clientY - initialY; //set current y-cordinate to where it is now
} else { //if its not a touchscreen (mouse)
currentX = e.clientX - initialX; //set current x-cordinate to where it is now
currentY = e.clientY - initialY; //set current y-cordinate to where it is now
}
//Im not sure what this does but it dosnt work without it
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, dragItem);
}
}
function setTranslate(xPos, yPos, el) { //Im not sure what this does but it dosnt work without it
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>
</body>
</html>```回答 1
Stack Overflow用户
发布于 2022-07-13 23:29:58
最后，我决定使用GSAP，一个非常快的动画库，它也支持通过其可拖放的插件进行拖动。如果我必须在JS中编码动画，而不是在CSS中很好地编写动画，那就更简单了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72896033
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号