使用 CSS3 动画/过渡高度，但使用 jQuery？

Posted 2023-03-06

【中文标题】使用 CSS3 动画/过渡高度，但使用 jQuery？

【英文标题】：Animate / transition height with CSS3, but using jQuery?

【发布时间】：2014-05-28 04:59:50

【问题描述】：

我正在尝试使用媒体查询为移动设备制作一个显示/隐藏菜单按钮。

我知道，由于硬件加速，移动设备上的 CSS3 在大多数情况下都比使用 jQuery animate 更快，因此我想使用这种方法。

我需要一个平滑的 0.5 秒 CSS3 动画，从 0px 到容器的任何高度。

我想做的——或者到目前为止我想到的逻辑——是当点击这个 UI 图标时，你将 .nav>ul 的高度从 0px 切换到 auto。

我尝试过使用 transition: height 并使用 jQuery 向所需位添加一个类，但我无法弄清楚如何将 CSS£ 变换/过渡应用到高度并让它平滑地切换高度，我现在卡住了。甚至不知道要 Google 做什么（尝试过，相信我！）。

这是一个有效的 JSFiddle：http://jsfiddle.net/3v47n/ - 灰色的 20x20 小图标是触发器。

我的 jQuery：

$('.nav span').on('click',function()

    $('.nav ul').addClass('animateHeight')

);

还有我的 CSS：

.nav 
min-height: 60px;

.nav ul 
height: 0;
overflow: hidden;
transition: height 0.5s ease;

.nav ul.animateHeight 
height: auto;
max-height: 9999px;

【问题讨论】：

你不能转换到 :auto;你必须使用 jquery slideUp() slideDown() 或者设置一个固定的像素高度来转换，或者使用某种棘手的技巧***.com/questions/3508605/…

谢谢@JonasGrumann 我试过这样做 - 但它不会工作。自从我使用 CSS3 动画/过渡以来已经有很长时间了，所以我不知道我的 CSS 是否正确。

【参考方案1】：

查看您的代码，我认为这可能是您最好的解决方案，请在您的代码中使用下面的 jQuery：

$('.nav span').on('click',function()
    if($('.nav ul').hasClass('animateHeight'))
        $('.nav ul').removeClass('animateHeight');
     else 
        $('.nav ul').addClass('animateHeight');
    
);

【讨论】：

您能帮我更正那个 URL 吗？我只看到我自己的 JSFiddle。

我的链接有点问题，在这里粘贴JS你可以抓住那个。

这对于事物的切换方面是绝对正确的，但我正在努力解决的是 CSS3 的实际动画。如何使用 css3 动画显示导航？

很抱歉花时间回复，但您可以删除最大高度上的 height:auto 和 CSS 动画

【参考方案2】：

刚刚为您找到了一个解决方案，可能不是最好的解决方案，而是一种解决方法。

由于您无法转换到 height: auto 您可以转换最大高度。但是您需要将目标高度设置为接近 height: auto 的值，但总是更大。

请看这里：http://jsfiddle.net/3v47n/5/

.nav ul 
  max-height: 0;
  overflow: hidden;
  transition: max-height 2s ease;

.nav ul.animateHeight 
  max-height: 999px;

【讨论】：

只需稍加改动，将 toggleClass 放入代码中，而不是 addClass