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

来自All you need to know about CSS Transitions：

[...]你会发现，如果你同时应用两组属性，那么浏览器会尝试优化   属性更改，忽略您的初始属性并阻止   过渡。在幕后，浏览器批量处理属性更改   在绘画之前，虽然通常加速渲染，但可以   有时会产生不良影响。

解决方案是在应用两组属性之间强制重绘。这样做的一个简单方法就是访问DOM   element的offsetHeight属性[...]

当您的代码调用强制重绘的.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可以在将来修复它。

在css过渡方面，Chrome有问题吗？

1 个答案: