使用toggleClass 进行CSS3 转换
我在 div 上设置了 -webkit-transition-duration 属性，其高度由另一个类设置。当我使用 jQuery 切换类时，转换会执行一些有趣的操作。
它一直向上，然后设置为适当的高度，而不是仅仅从 50px 高度移动到自动高度，这正是我所期望的。有什么解决办法吗？
这是一个演示： http://jsfiddle.net/XcFxQ/1/
I have the -webkit-transition-duration property set on a div, whose height is set by another class. When I use jQuery to toggle the class, it the transition does something funky.
It goes all the way up, and then is set to the proper height instead of just moving from 50px height to automatic height which is what I expect it to do. What's the fix for this?
Here is a demo: http://jsfiddle.net/XcFxQ/1/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这有效：
http://jsfiddle.net/Eric/XcFxQ/2/
虽然高度严格来说不是自动的。它手动设置高度以使其具有动画效果。
This works:
http://jsfiddle.net/Eric/XcFxQ/2/
Although the height is not strictly auto. It manually sets the height in order to make it animate.
我能够在没有 -webkit-transition-property 的情况下正常工作，而是使用带有 jQuery UI 的 jQuery 1.7，如下所示：
http://jsfiddle.net/pjFAt/
在我的测试中，这产生了最干净、最稳健的结果。
现在，我不确定您是否热衷于在您的网页中包含 jQuery UI。如果没有，我最好的猜测是您可能需要使用更多的 Javascript 来解决渲染缺陷（即，如果 hasClass，则 animate 等...）
I was able to get it to work correctly without -webkit-transition-property and instead using jQuery 1.7 with jQuery UI as in this fiddle:
http://jsfiddle.net/pjFAt/
In my testing, this produced the cleanest, most robust results.
Now, I'm not sure if you're keen on including jQuery UI in your webpage. If not, it's my best guess that you might have to work around the rendering flaws using some more Javascript (ie. if hasClass, then animate, etc...)