Ist es möglich, den aktuellen (x, y, z) eines Elements zu finden, während es sich mit translate3d (x, y, z) bewegt?

Question

Mit CSS3s -webkit-transform: translate3d(x,y,z); ist es möglich, die Bewegung (x, y, z) zu verfolgen, wie es sich mit Javascript bewegt?

Beispiel: Ein Objekt beginnt bei (0,0,0) und wir übersetzen es für eine Dauer von 4 Sekunden in (4,4,0).

Theoretisch sollte das Element in der ersten Sekunde bei (1,1,0) platziert werden, während in der zweiten Sekunde das Element bei (2,2,0) usw. sein sollte. Gibt es einen Weg für Javascript, um das Objekt zu verfolgen?

Beim Abrufen der css-Eigenschaft von translate3d (x, y, z) werden nur die endgültigen Koordinaten der Übersetzung zurückgegeben. Was zu erwarten ist als das, worauf es eingestellt ist.

Answer 1

Wenn Sie das Element durch CSS-Übergänge verschieben, dann gibt es keine Möglichkeit, das Element anzuheften. Es gibt EventListener nur für Transitionstart und Transitionend.

Wenn Sie durch Javascript animieren dann ja, man kann x verfolgen, y, z durch:

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