Position des éléments de réception au milieu de la transition CSS

Je dois recevoir les éléments à gauche et la propriété supérieure au milieu de la transition CSS. Actuellement, j'utilise la méthode de position de jQuery et ça semble fonctionner dans certains cas.

J'ai fait 2 exemples pour montrer mon problème plus clairement:

1) Voici un exemple de NON- travail où la position de l'élément est imprimée sur console. La position correcte est reçue jusqu'à ce que la transition des éléments soit changée en position d'origine. Après la première modification de la valeur de transformation, la position n'est plus mise à jour. JsFiddle link: http://jsfiddle.net/PCWDa/8/

2) Voici l'exemple de TRAVAIL avec une seule différence dans la manière dont la position de l'élément nous est signalée: la position est dépassée pour saisir la valeur des éléments (type = texte). JsFiddle lien: http://jsfiddle.net/PCWDa/9/

Conclusion : la méthode jQuerys position () semble ne pas recevoir la position correcte lorsque les propriétés des éléments dom ne reçoivent aucune mise à jour (comme la valeur de mise à jour de l'élément de texte, etc.).

Punaise? Cela pourrait être un bug dans jQuery, css ou le navigateur lui-même? Existe-t-il des solutions de rechange pour que le premier exemple fonctionne – pour obtenir une position correcte au milieu de la transition à tout moment sans modifier les propriétés des éléments dom comme dans le deuxième exemple.

JsFiddle code:

Pour obtenir l'exemple 1 du code, modifiez la variable fonctionnant sur false et obtenez l'exemple 2, sur 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);