I need to receive the elements left and top property in the middle of the CSS transition. Currently I use jQuery position method and it seem to be working to some point.
I have made 2 examples to show my problem more clearly:
1) Here is NON-working example where position of element is printed to console. The correct position is received till the elements transition is changed to its original position. After the first change in transform value, the position is not updated anymore. jsFiddle link: http://jsfiddle.net/PCWDa/8/
2) Here is WORKING example with only difference in the way position of the element is reported to us: position is outed to input (type=text) elements value. jsFiddle link: http://jsfiddle.net/PCWDa/9/
Conclusion: the jQuerys position() method appears not to receive the correct position when dom elements properties does not receive any updates (like updating value of text element etc).
Bug? This could be bug in jQuery, css or browser itself? Are there any workarounds to get first example working - to get correct position in the middle of transition at any time without making changes to dom element properties like in second example.
jsFiddle code:
To get example 1 code, change variable working to false and to get example 2 , to 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);