javascript - CSSトランジションの途中で要素の位置を受け取る

Question

CSS トランジションの途中で、要素の left と top プロパティを受け取る必要があります。現在、私は jQuery position メソッドを使用していますが、ある程度は機能しているようです。

問題をより明確に示すために、2 つの例を作成しました。

1)要素の位置がコンソールに出力される非動作例を次に示します。要素遷移が元の位置に変更されるまで、正しい位置が受信されます。変換値の最初の変更後、位置は更新されなくなりました。jsFiddle リンク: http://jsfiddle.net/PCWDa/8/

2)要素の位置が報告される方法のみが異なる作業例を次に示します。位置は入力 (type=text) 要素の値に出力されます。jsFiddle リンク: http://jsfiddle.net/PCWDa/9/

結論: dom 要素のプロパティが更新を受信しない場合 (テキスト要素の値の更新など)、jQuerys の position() メソッドは正しい位置を受信しないように見えます。

バグ？これは、jQuery、css、またはブラウザー自体のバグでしょうか? 最初の例を機能させるための回避策はありますか?

---

jsFiddle コード:

サンプル 1 のコードを取得するには、 variable working を 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

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

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