是否可以在Javascript中的css3转换期间获取目标css属性值？

我有两个divs 绝对定位 ，我将它们相对于彼此定位。 当一个width改变时，我重新计算并设置位置。 当我在’ width ‘属性上使用css3过渡时，当我尝试获得动画的’ width ‘时，它会给我dom上的当前值。 但我希望在转换效果开始时获得转换的目标值以正确设置位置。 这可以通过javascript或其他方式获得目标值吗？

编辑

下面是一个jsfiddle演示我的问题。 它提醒’100px’，但我需要’300px’。

http://jsfiddle.net/Mdbgs/

谢谢。

Answer 1

那是因为.css('width')在元素上调用getComputedStyle ，它确实返回了转换值。 如果您直接访问该样式，您将获得刚刚设置的内容：

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

（ 更新小提琴 ）

Answer 2

您可以使用transitionend事件:( 请参阅等效的前缀供应商 ）

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

DEMO