Is it possible to get the target css property value during a css3 transition in Javascript?

Question

I've two divs positioned absolutly and I position them relative to each other. When width of one is change, then i recalculate and set positions. While I use css3 transition on ' width ' property, when i try to get ' width ' of animated one, it gives me the current value on dom. But i want to get the target value of transition to set positions correctly on begin of transition effect. Is this possible to get the target value via javascript or other ways?

EDIT

Below is a jsfiddle demonstrates my issue. It alerts '100px' but I need to get '300px'.

http://jsfiddle.net/Mdbgs/

Thanks.

Answer 1

That's because .css('width') is calling getComputedStyle on the element, which does return the transitioning value. If you did directly access the style, you would get what you just had set:

document.getElementById('transition_div').style.width
$('#transition_div').prop('style').width
$('#transition_div')[0].style.width

( updated fiddle )

Answer 2

You could use the transitionend event: ( see for equivalent prefixed vendor )

$('#transition_div').css('width', 300).on("transitionend", function () {
    alert($(this).css('width'));
});

DEMO