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.

can you show us your code ? maybe you should consider creating a sample on jsfiddle to highlight the problem so we can understand your issue and try to help you with it. — trrrrrrm
– trrrrrrm, Commented Aug 28, 2013 at 11:25
How do you set the width? Is it on "auto" and it automatically expands/shrinks? — Jonas Grumann
– Jonas Grumann, Commented Aug 28, 2013 at 11:25
If you set it like that, I don't see the problem. I mean, why do you need to read it from the dom if you hardcode it in the javascript? jsfiddle.net/jonigiuro/Mdbgs/1 — Jonas Grumann
– Jonas Grumann, Commented Aug 28, 2013 at 11:41

Bergi · Accepted Answer · 2013-08-28 11:57:12Z

6

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)

answered Aug 28, 2013 at 11:57

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Halil Ibrahim Over a year ago

You are awesome man, that is what i was asking about. Thank you for the answer.

vaclav_o Over a year ago

is it possible somehow get value of calculated css property? I mean when is not specified in styles: stackoverflow.com/questions/18975412/…

A. Wolff · Accepted Answer · 2013-08-28 11:46:27Z

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

answered Aug 28, 2013 at 11:46

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

3 Comments

Halil Ibrahim Over a year ago

I didn't know about that event, thak you for answer. But actaully I need to get the value on start of the transition. Is there any legal or illegal way to do this?

A. Wolff Over a year ago

So see @JonasGrumann comments, as i don't understand your issue either. Because, if you animate the DIV to a specific value, then you know the value.

terrinecold Over a year ago

I have the same problem and I would probably have demonstrated the same way. What happens for me is that in the real code the part which is doing the animation and the part which is checking are in completely different places. The part where I need to read the value is actually in my tests.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related