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

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

本文关键字：目标 css 属性 转换 Javascript css3 中的 是否      更新时间：2023-09-26

我有两个绝对定位的div，并且我将它们相对于彼此定位。当一的width发生变化时，我重新计算并设置位置。当我在"width"属性上使用css3转换时，当我尝试获取动画的"width"时，它会给我dom上的当前值。但我想得到过渡的目标值，以便在过渡效果开始时正确设置位置。这是否可以通过javascript或其他方式获得目标值？

编辑

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

http://jsfiddle.net/Mdbgs/

谢谢。

这是因为.css('width')正在元素上调用getComputedStyle，它确实返回转换值。如果你直接访问样式，你会得到你刚刚设置的：

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

（更新的小提琴）

您可以使用transitionend事件：（请参阅以获得等效前缀的供应商）

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

演示

相关文章：