Question

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

我知道移动设备上的CSS3在移动设备上的速度比使用jQuery动画更快，因为硬件加速，因此我希望使用这种方法。

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

我想做的 - 或者我到目前为止所考虑的逻辑 - 是在点击此UI图标时，您将.nav＆gt; ul的高度从0px切换为自动。

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

这是一个有效的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;
}

Answer 1

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

因为你无法过渡到高度：自动你可以转换最大高度。但是你需要将目标高度设置为接近高度的值：auto，但总是要大一些。

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

.nav ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 2s ease;
}
.nav ul.animateHeight {
  max-height: 999px;
}

Answer 2

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

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

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

2 个答案: