在考虑向Chromium-提交错误时，正在寻找解决方法
如果元素有一个转换，getComputedStyle在转换结束之前不会返回您期望它返回的内容。
长短-如果我有一个高度为24px的元素，并且添加一个类会使它的高度为80px(有一个到和从的转换)，并且这两个高度都在样式表中定义-如果我设置了该类并选中getComputedStyle，它仍然会给我非类的高度，直到转换结束。
我在这里谈论的一个例子：
<html>
<head>
<style>
#foo {
display: inline-block;
background-color: red;
height: 24px;
padding: 4px 0;
width: 200px;
-webkit-transition-property: height;
-webkit-transition-timing-function: linear;
-webkit-transition-duration: 300ms;
}
#foo.changed {
height: 80px;
}
</style>
</head>
<body>
<div id="foo"></div>
<p>before: <span id="before"></span></p>
<p>after: <span id="after"></span></p>
<script type="text/javascript">
var foo
function checkFoo(e) {
foo.classList.toggle('changed');
document.getElementById('before').innerText = window.getComputedStyle(foo, null).getPropertyValue("height");
};
window.addEventListener('load', function() {
foo = document.getElementById('foo');
foo.addEventListener('webkitTransitionEnd', function(e){
document.getElementById('after').innerText = window.getComputedStyle(foo, null).getPropertyValue("height");
});
foo.addEventListener('click', checkFoo, false);
});
</script>
</body>
</html>
这里的样品：http://jsfiddle.net/bobbudd/REeBN/
(注意：这个fiddle只能在webkit中使用，信不信由你，它是我们的目标浏览器——但我也在Firefox中测试过并遇到了同样的问题)
问题是，在transitionEnd发生之前，我有多种情况需要知道最终的样式(有些人可能会说是"计算的"样式)。
或者我想这是一个更大问题的一部分——有这么多不同的方法可以知道元素在特定时刻的高度，getComputedStyle是否应该不得到样式表(或样式属性)所说的属性应该是什么？
在你问我是否可以把最后的数字放在JS中之前，答案是(不幸的)没有。
有人能想出一种方法在过渡结束前获得这个最终值吗？
这根本不是一个bug。getComputedStyle用于在调用属性时返回客户端呈现的值。如果在转换期间调用它，则会在转换期间获得该值，如下所示：http://jsfiddle.net/REeBN/1/
获取规则设置的最终值的方法是检查规则本身，可能是通过使用cssRules。
以下是使用window.getMatchedCSSRules:的实现
cssRules = window.getMatchedCSSRules(this);
var finalCssRule = "";
for(var i = 0; i < cssRules.length; i++){
if(cssRules[i].selectorText == "#foo.changed"){
finalCssRule = cssRules[i];
}
}
document.getElementById('final').innerText = finalCssRule.cssText;
以下是一个演示：http://jsfiddle.net/REeBN/2/