Javascript 带有 toggleClass 的 CSS3 过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8205189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Transitions with toggleClass
提问by Q2Ftb3k
I have the -webkit-transition-durationproperty 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.
我-webkit-transition-duration在 div 上设置了属性，其高度由另一个类设置。当我使用 jQuery 切换类时，它的转换会做一些时髦的事情。
It goes all the way up, and then is set to the proper height instead of just moving from 50pxheight to automatic height which is what I expect it to do. What's the fix for this?
它一直向上，然后设置为适当的高度，而不是仅仅从50px高度移动到自动高度，这是我期望它做的。有什么办法解决这个问题？
Here is a demo: http://jsfiddle.net/XcFxQ/1/
这是一个演示：http: //jsfiddle.net/XcFxQ/1/
采纳答案by Eric
This works:
这有效：
http://jsfiddle.net/Eric/XcFxQ/2/
http://jsfiddle.net/Eric/XcFxQ/2/
Although the height is not strictly auto. It manually sets the height in order to make it animate.
虽然高度不是严格的自动。它手动设置高度以使其具有动画效果。
回答by Matt
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:
我能够让它在没有 -webkit-transition-property 的情况下正常工作，而是使用带有 jQuery UI 的 jQuery 1.7，就像这个小提琴一样：
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...)
现在，我不确定您是否热衷于在您的网页中包含 jQuery UI。如果没有，我最好的猜测是您可能必须使用更多的 Javascript 来解决渲染缺陷（即，如果使用 hasClass，然后设置动画等...）
![Javascript “[本机代码]”是什么意思？](/res/img/loading.gif)