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

【问题标题】：Animate / transition height with CSS3, but using jQuery?使用 CSS3 动画/过渡高度，但使用 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() 或者设置一个固定的像素高度来转换，或者使用某种棘手的技巧stackoverflow.com/questions/3508605/…
谢谢@JonasGrumann 我试过这样做 - 但它不会工作。自从我使用 CSS3 动画/过渡以来已经有很长时间了，所以我不知道我的 CSS 是否正确。

标签： jquery css transition

【解决方案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