jquery - 当涉及到 css 转换时，Chrome 有问题吗？

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)
})

这很有效，而且看起来非常好。看我的 fiddle http://jsfiddle.net/n3g83/1/ .但是，我不需要 foo 变量，但如果我删除它，转换将停止正常工作。

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

所以无论如何，我认为这可能对其他为此苦苦挣扎的人有用:)

Answer 1

来自 All you need to know about CSS Transitions :

[...] you’ll find that if you apply both sets of properties, one immediately after the other, then the browser tries to optimize the property changes, ignoring your initial properties and preventing a transition. Behind the scenes, browsers batch up property changes before painting which, while usually speeding up rendering, can sometimes have adverse affects.

The solution is to force a redraw between applying the two sets of properties. A simple method of doing this is just by accessing a DOM element’s offsetHeight property [...]

当您的代码调用 .css("height") 时，jQuery internally access the element's offsetHeight强制重绘的属性。如果没有这个，Blink 和 Webkit 将批量处理由 .css("height", r) 和 .addClass("test") 所做的样式更改。

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

this.offsetHeight;

Fiddle

我问了一个similar question正在寻找一个干净的解决方案，但显然还没有。

Firefox 直到不久前也有类似的行为(Firefox 23 有相同的“错误”)，但它已被修复，因此我们希望 Blink 和 Webkit 可以在未来修复它。