带有 toggleClass 的 CSS3 过渡答案

【问题标题】：CSS3 Transitions with toggleClass带有 toggleClass 的 CSS3 过渡
【发布时间】：2023-03-23 05:44:01
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

在我的测试中，这产生了最干净、最可靠的结果。

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

【讨论】：

是的，我不希望包含 jQuery UI，但我可能可以使用 jQuery 的动画来解决它。我希望有一种方法可以用 CSS 本身来做到这一点，但我想没有。谢谢;)
感谢您的宝贵回答。我被困在我的项目中，因为我在引导程序中制作了一个侧边栏菜单。我不得不在 col 类之间切换类。 Jquery 本身不允许任何转换。因此使用 jquery UI 来完成这项任务，它的工作就像一个魅力

【解决方案2】：

这行得通：

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

【讨论】：