javascript - 如何将 CSS 翻译添加到现有翻译中？

Question

我正在使用 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 应该是相对的。

Answer 1

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

另一个建议是使用position、left 和top 设置元素的位置。例如使用以下代码:

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

那样的话，变换就会应用到那个位置，而不是相对于你之前的变换。