CSS3使用toggleClass进行转换

我在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，那么动画等等……）