Question

我有两个div 绝对定位并且我将它们相对于彼此定位。当一个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

（updated fiddle）

Answer 2

您可以使用transitionend事件：（see for equivalent prefixed vendor）

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

DEMO

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

2 个答案: