在Javascript中的css3过渡期间，是否可以获得目标css属性值？ [英] Is it possible to get the target css property value during a css3 transition in Javascript?

问题描述

我有两个位置 ，我将它们相对定位。当 width 一个变化时，我重新计算并设置位置。虽然我使用css3过渡在' width '属性，当我尝试获取'宽度'的动画，给我在dom上的当前值。但我想获得转换的目标值正确设置位置开始过渡效果。

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

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

Below is a jsfiddle demonstrates my issue. It alerts '100px' but I need to get '300px'.

http：// jsfiddle.net/Mdbgs/

感谢。

推荐答案

p>这是因为 .css（'width'） 正在调用 getComputedStyle ，它返回转换值。如果你直接访问风格，你会得到你刚才设置的：

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

（更新小提琴）

这篇关于在Javascript中的css3过渡期间，是否可以获得目标css属性值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！