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

我正在使用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";

---

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

如果只是关于变换，则需要重置动画中的每个值，否则它将被动画规则覆盖

例如：

div{/*translate值减少，以适应代码段窗口*/
边框：实心；
高度：40px；
宽度：40px；
变换：translatex（180px）translatey（140px）；
动画：2s向前测试；
}
@关键帧测试{
0% {
变换：translatex（180px）translatey（150px）
}
100% {
转换：translatex（180px）translatey（180px）
}
}

---

我的上述评论的一个例子：

#wrapperDiv{
宽度：100px；
高度：100px；
背景：绿色；
变换：平移（400px，200px）旋转（50度）；
}
#尤迪夫{
宽度：100px；
高度：100px；
背景：红色；
动画：测试2s无限；
}
@关键帧测试{
0% {
变换：translateY（20px）旋转（0度）；
}
100% {
变换：translateY（80px）旋转（40度）；
}
}

---

我认为一个更通用的解决方案是解析css transform属性，因为这允许您在不必担心元素状态的情况下继续为元素设置动画

这是我在本案例中使用的解决方案：

parseTransformMatrix = function(str){
  const match_float = "[+\\-]?(?:0|[1-9]\\d*)(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?"
  const match_sep = "\\s*,?\\s*"
  m = str.match(RegExp(`matrix\\((${match_float}(?:${match_sep}${match_float})*)\\)`))
  if(!m || !m.length || m.length < 2) return null
  return m[1].match(RegExp(match_float, 'g')).map(x => parseFloat(x))
}
// Test parseTransformMatrix method
console.log(parseTransformMatrix("matrix(1, 0, 0, 1, 96.2351, 309.123)"));

getElementTranslate = function(e){
  let t = e.css("transform")
  let r = { left: 0, top: 0 }
  if(!t) return r
  mat = parseTransformMatrix(t)
  if(!mat || !mat.length || mat.length != 6) return r
  r.left = mat[4]
  r.top = mat[5]
  return r
}

---

把你的元素放到另一个div中！并在div上设置动画！实际上，这可能是最好的解决方案？你能把它作为一个答案吗？我已经发布了一个例子。是的，但重点是我用javascript动态初始化起始值，然后CSS样式表再次重置这些值。@Kokodoko我明白这一点，通过js重置coordonates，让transform完成CSS无法捕获和添加早期值的事情，js做到了。必须重新思考Ypur方法。父级和子级分派js值和css动画，或一起使用“相对”和“变换”，以避免值被忽略reset@Kokodoko位置：相对+变换也可以。如果更新js让您感到困扰，可以在动画中设置相对+坐标，而不是变换：）您可以跳过额外的包装：）谢谢，使用左上方的位置可以解决此特定问题！尽管我更喜欢相对的css转换。

let t = getElementTranslate(e)
e.css({transform:`translate(${t.left+20}px,${t.top+80}px)`})