我使用 CSS 翻译将 DIV 元素放置在屏幕上。这工作得很好，除了当稍后位移相同的元素时，原始位移被丢弃。
使用 javascript 设置 CSS 起始位置
div.style.transform ="translate(800px, 400px)";
使用 javascript 随机设置起始位置后，CSS 动画只是将其重置回来。
CSS动画
@keyframes testanimation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(80px);
}
}
如何结合 CSS 翻译来考虑之前的位移？在本例中，目标是让动画在随机位置开始。 20px - 80px 应该是相对的。
我猜最好的方法是获取以前的转换，向这些值添加一些内容，然后应用新的转换。
另一个建议是使用设置元素的位置position, left and top。例如使用以下代码：
div.style.position = "absolute";
div.style.left = "800px";
div.style.top = "400px";
这样，变换将应用于该位置，而不是相对于之前的变换。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
