Chrome在css转换方面有缺陷吗

Question

我正在用漂亮的过渡来消除我的div的自动高度。我无意中在Chrome 31.0中发现了一个我认为是错误的东西。

由于css3无法处理到自动高度的转换(有很多关于这个主题的帖子)，我尝试了一种变通方法。所以我有这个代码：

$(document).on("click","#test",function(){
var r =$(this).css("height")
$(this).css("height", r)
var foo = $("#test").css("height")
$(this).addClass("test")
$("#test").css("opacity","0")
setTimeout(afterWait,1000)
})

这真的很管用，看起来也很好看。看看我的小提琴http://jsfiddle.net/n3g83/1/.然而，我不需要foo变量，但如果我删除它，转换将停止正常工作。

在FF和IE中，它在这两种情况下都有效。

所以不管怎样，我认为这可能对其他正在挣扎的人有用：)

Answer 1

From All you need to know about CSS Transitions:

[…]您会发现，如果您一个接一个地应用两组属性，则浏览器会尝试优化属性更改，忽略初始属性并阻止过渡在后台，浏览器会批量处理属性更改在绘制之前，虽然通常会加快渲染速度，但可以有时会产生不良影响。

解决方案是强制在应用这两组属性之间重新绘制。一个简单的方法就是访问DOM元素的offsetHeight属性〔…〕

当您的代码调用.css("height")时，jQuery会在内部访问元素的offsetHeight属性，从而强制重绘。否则，Blink和Webkit将批量处理.css("height", r)和.addClass("test")所做的样式更改。

如果您不喜欢对.css("height")的调用，可以将其替换为任何其他强制重绘的内容，例如访问元素的offsetHeight属性：

this.offsetHeight;

Fiddle

我也问过类似的问题，想找到一个干净的解决方案，但显然还没有。

直到不久前，Firefox也有类似的行为(Firefox 23也有同样的"错误")，但它已经修复了，所以我们可以希望Blink和Webkit将来能修复它。