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

2019年7月28日 168次阅读

我正在使用CSS translate在屏幕上放置一个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和top设置元素的位置.使用以下代码作为示例：

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

这样,变换将应用于该位置,而不是相对于您之前的变换.

点赞