如何将css翻译添加到现有翻译中?

2022-09-06 00:00:00 javascript css css-transforms

我使用css翻译在屏幕上放置了一个DIV元素。这可以很好地工作,只是在以后移位相同元素时,会丢弃原始移位。

使用Java脚本设置css开始位置

div.style.transform ="translate(800px, 400px)";

在使用javascrip随机设置开始位置后,css动画只是将其重置回来。

CSS动画

@keyframes testanimation {
  0% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(80px);
  }
}

如何合并CSS转换,以将以前的位移考虑在内?在这种情况下,目标是让动画从随机的位置开始。20px-80px应该是相对的。


解决方案

我想最好的方法是获取以前的转换,向这些值添加一些内容,然后应用新的转换。

另一个建议是使用positionlefttop设置元素的位置。例如,使用以下代码:

div.style.position = "absolute";
div.style.left = "800px";
div.style.top = "400px";

这样,转换将应用于该位置,而不是相对于上一个转换。

相关文章