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

【问题标题】：Is it possible to get the target css property value during a css3 transition in Javascript?是否可以在 Javascript 中的 css3 转换期间获取目标 css 属性值？
【发布时间】：2013-08-31 10:35:44
【问题描述】：

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

编辑

下面是一个 jsfiddle 演示了我的问题。它会提醒“100px”，但我需要得到“300px”。

http://jsfiddle.net/Mdbgs/

谢谢。

【问题讨论】：

你能告诉我们你的代码吗？也许您应该考虑在 jsfiddle 上创建一个示例来突出问题，以便我们了解您的问题并尝试为您提供帮助。
如何设置宽度？它是否处于“自动”状态并自动扩展/收缩？
让我尝试创建一个小提琴
我为这个问题添加了一个小提琴。请检查一下。
如果你这样设置，我看不出问题。我的意思是，如果您在 javascript 中对其进行硬编码，为什么还需要从 dom 中读取它？ jsfiddle.net/jonigiuro/Mdbgs/1

标签： javascript jquery css css-transitions

【解决方案1】：

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

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

(updated fiddle)

【讨论】：

你是个了不起的人，这就是我要问的。谢谢你的回答。
是否有可能以某种方式获得计算出的 css 属性的值？我的意思是什么时候没有在样式中指定：stackoverflow.com/questions/18975412/…

【解决方案2】：

您可以使用transitionend 事件：(see for equivalent prefixed vendor)

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

DEMO

【讨论】：

我不知道那个事件，谢谢你的回答。但实际上我需要在过渡开始时获得价值。是否有任何合法或非法的方法可以做到这一点？
所以请参阅@JonasGrumann cmets，因为我也不明白您的问题。因为，如果您将 DIV 设置为特定值，那么您就知道该值。
我有同样的问题，我可能会以同样的方式演示。对我来说发生的事情是，在实际代码中，执行动画的部分和正在检查的部分位于完全不同的位置。我需要读取值的部分实际上是在我的测试中。