Jquery 响应式导航'；最大高度'；问题（CSS3过渡）

我想创建一个具有“向下滑动”效果的响应性导航。我不想使用jQuery的

.slideDown（）

或

.slideToggle（）

，只想使用CSS3转换。我知道的唯一方法是使用

max height

来模拟这种效果

因此，这或多或少是我用于导航的当前HTML/CSS代码：

此导航存在两个问题：

目前，我正在使用

minwidth

在媒体查询中重置

max height:0

。否则，在更大的屏幕上根本看不到导航

// 'min-width' media query
.nav__list {
    min-height: 500px; 
    /* Is there any better way to reset max-height without using a px value? */
}

这似乎不对，我正在寻找一种解决方案，如

minheight:auto或<代码>最大高度：自动。但这似乎对我不起作用

我想通过jQuery将

max height

设置为移动导航的高度。如果我将其设置为一个非常大的像素值（根据），我在关闭导航时总是会有延迟。所以我试过这样的方法：

$navIcon.on('click', function() {
    var crtHeight = $navList.height();
    alert('Height: ' + crtHeight); // -> 0
    $navList
        //.css('max-height', crtHeight)
        .toggleClass('nav__list--active');
});

但不幸的是，我无法获得导航的高度，因为它被设置为

最大高度：0

（若它关闭）。我需要像

$el.heightIgnoreMaxHeight（）这样的东西：）

---

有什么建议吗？谢谢你的帮助。

如果不知道高度，我认为没有一个好的CSS解决方案。我要做的是使用jQuery设置高度。我可以通过使用

scrollHeight

来实现这一点，即使元素设置为高度0，它也会返回正确的高度

示例

$navIcon.on('click', function() {
    var crtHeight = $navList[0].scrollHeight;

    $navList
    //.css('max-height', crtHeight)
    .toggleClass('nav__list--active');
});

---

我会寻找一个解决方案，完全避免您的导航高度。通过这种方式，您将始终在导航中获得

$.fn.height（）

的有效结果，并通过动画元素尺寸避免已知问题（抖动、

高度：自动

限制等）

对于您的用例，一个可行的选项是，例如

transform:translateY（）

注意：示例和提琴仅包括

-webkit-

前缀

对于

隐藏状态和转换：

.nav__list {
  -webkit-transform: translateY(-100%);
  transition: -webkit-transform 1s;
  ...
}

对于两种<代码>可见<代码>状态：

.nav__list--active {
  -webkit-transform: translateY(0%);
}

...

@media only all and (min-width: 800px) {
  .nav__list {
    -webkit-transform: translateY(0%);
  }
}

这意味着
.nav
上需要一些额外的“清理”样式。请在此处查看它的实际操作：
谢谢，
el.scrollHeight
似乎解决了我的第二个问题。对于更大屏幕的重置
max height
（如果导航被折叠）有什么建议吗？是否有类似于
max height:auto
？谢谢，这可能是我的一个选择。如果在导航“未打开”的情况下调整窗口大小，有没有办法避免这些奇怪的过渡效果？如果在转换结束后单击按钮并将其删除，我是否可以将
转换：转换…
样式应用于我的
.nav\u列表
？或者有更好的选择吗？在应用媒体查询时，可以通过以下方法避免过渡：1。默认情况下，在元素2上设置无转换。切换一个“入”和一个“出”的类，这两个运动的过渡，3。在
transitionEnd
之后删除与默认状态（此处为“out”）对应的类。查看更新的小提琴：