CSS3使用toggleClass进行转换

Question

我在div上设置了-webkit-transition-duration属性，其高度由另一个类设置。当我使用jQuery切换类时，转换会做一些时髦的事情。

它一直向上，然后被设置到适当的高度，而不是从50px高度移动到自动高度，这是我期望它做的。有什么办法解决这个问题？

以下是演示：http://jsfiddle.net/XcFxQ/1/

Answer 1

这有效：

http://jsfiddle.net/Eric/XcFxQ/2/

虽然高度不是严格自动的。它手动设置高度以使其具有动画效果。

Answer 2

我能够让它在没有-webkit-transition-property的情况下正常工作，而是使用jQuery 1.7和jQuery UI，就像这个小提琴一样：

http://jsfiddle.net/pjFAt/

在我的测试中，这产生了最干净，最强大的结果。

现在，我不确定你是否热衷于在网页中加入jQuery UI。如果没有，我最好的猜测是你可能需要使用更多的Javascript解决渲染缺陷（即如果是hasClass，然后是动画等等）。