Javascript CSS过渡中的接收元素位置

我需要在CSS转换的中间接收元素左侧和顶部属性。目前我使用jqueryposition方法，它似乎在某种程度上起作用

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

1） 以下是非工作示例，其中元件位置打印到控制台。接收到正确的位置，直到元件转换更改为其原始位置。第一次更改变换值后，位置不再更新。JSIDLE链接：

2） 下面是一个工作示例，其中向我们报告元素位置的方式不同：位置路由到输入（type=text）元素值。JSIDLE链接：

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

Bug？这可能是jQuery、css或浏览器本身的Bug？在第二个例子中，是否有任何方法可以使第一个示例工作在过渡期间获得正确的位置，而不必像第二个例子那样改变DOM元素属性。

---

JSIDLE代码：

要获得示例1代码，请将变量working更改为false，将示例2更改为true

css

html

---

这里的问题：

if（direction=！direction）

。必须是比较，而不是赋值。此处警告

window.setInterval（“swap（）”，3000）。您正在触发
eval
，将函数用作引用，而不是字符串。您在评论之前读过我的帖子吗？重点不在示例代码中，而是如何获得正确的位置，对于记录，我的示例代码很好。如果（direction=！direction）是比较和赋值。嗯，那代码在我看来就是乱七八糟的。要让它更清楚，让人们对答案感兴趣，这取决于你。如果

语句看起来像是一个错误，并且存在

eval

问题……可能是您使用了

translateX

；当使用

position:absolute

和

left

属性时，它似乎确实起作用（）。检查此处，这似乎与以下内容相关：

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

<div class="box"></div>
<input type="text" class="val">

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);