javascript - 是否可以使用 translate3d(x,y,z) 找到元素移动时的当前 (x,y,z)？

Question

使用 CSS3s-webkit-transform: translate3d(x,y,z);是否可以在使用 javascript 移动时跟踪 (x,y,z) 移动？

示例：一个对象从 (0,0,0) 开始，我们在 4 秒的持续时间内将其转换为 (4,4,0)。

理论上，在第一秒，元素应该放在 (1,1,0)，而在第二秒，元素应该放在 (2,2,0)，等等。有没有办法让 Javascript 跟踪目的？

检索 translate3d(x,y,z) 的 css 属性只会返回最终的平移坐标。这是可以预期的，因为它是设置的。

Answer 1

如果您通过 CSS 过渡移动元素，那么不，没有办法固定元素。只有 transitionstart 和 transitionend 的事件监听器。

如果您是通过 javascript 制作动画，那么可以，您可以通过以下方式跟踪 x、y、z：

node = document.getElementById("yourid");

//your animation loop
  console.log(window.getComputedStyle(node).webkitTransform); //this will return a string
  var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
  console.log(curTransfrom); //this will return an object
//end animation loop