接收元素位于CSS过渡的中间位置

我需要在CSS过渡的中间接收元素left和top属性。 目前我使用jQuery位置方法，它似乎在某种程度上工作。

我做了两个例子来更清楚地表明我的问题：

1）这是非工作示例，其中元素的位置被打印到控制台。 接收到正确的位置，直到元素转换更改为其原始位置。 在转换值第一次更改后，位置不再更新。 jsFiddle链接： http ： //jsfiddle.net/PCWDa/8/

2）这是WORKING示例，只向我们报告元素位置的方式不同：位置输入（type = text）元素值。 jsFiddle链接： http ： //jsfiddle.net/PCWDa/9/

结论 ：当dom元素属性没有收到任何更新（比如更新文本元素的值等）时，jQuerys position（）方法似乎没有收到正确的位置。

错误？ 这可能是jQuery，css或浏览器本身的错误？ 是否有任何变通方法可以让第一个示例工作 – 在任何时候在转换过程中获得正确的位置，而无需像第二个示例中那样更改dom元素属性。

---

jsFiddle代码：

要获取示例1代码，请将变量设置为false并将示例2更改为true。

CSS

.box{ width: 100px; height: 100px; background-color: red; position: relative; -webkit-transition: all 5000ms ease; } .box_moved{ -webkit-transform: translateX(300px); } 

HTML

JavaScript的

 var direction = false; var working = false; window.forward = function(){$('.box').addClass('box_moved')} window.backward = function(){$('.box').removeClass('box_moved')} window.swap = function(){ if( direction = !direction ) forward() else backward(); } window.getlocation = function(){ if(working) $('.val').val( $('.box').position().left ); else console.log($('.box').position().left); } window.setInterval("swap()",3000); window.setInterval("getlocation()",200);