Question

我想创建一个带有“向下滑动”效果的自适应导航。我不想使用jQuery的.slideDown()或.slideToggle()，而只使用CSS3过渡。我知道的唯一方法是使用max-height来模仿这种效果。

所以这或多或少是我用于导航的当前HTML / CSS代码：http://codepen.io/anon/pen/tJLHo

此导航存在两个问题：

目前我正在使用min-width重置媒体查询中的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? */
}
```
这似乎不对，我正在寻找像min-height: auto;或max-height: auto;这样的解决方案。但这似乎对我不起作用。
我想通过jQuery将max-height设置为我的移动导航的高度。如果我将其设置为一个非常大的像素值（根据http://davidwalsh.name/css-slide），我在关闭导航时总会有延迟。所以我试过这样的事情：
```
$navIcon.on('click', function() {
    var crtHeight = $navList.height();
    alert('Height: ' + crtHeight); // -> 0
    $navList
        //.css('max-height', crtHeight)
        .toggleClass('nav__list--active');
});
```
但遗憾的是我无法获得导航的高度，因为它设置为max-height: 0（如果已关闭）。我需要像$el.heightIgnoreMaxHeight();：）

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

Answer 1

如果高度未知，我不相信有一个很好的CSS解决方案。我所做的是使用jQuery来设置高度。我可以通过使用scrollHeight来实现这一点，即使元素设置为高度0，它也会返回正确的高度。

示例

$navIcon.on('click', function() { var crtHeight = $navList[0].scrollHeight; $navList //.css('max-height', crtHeight) .toggleClass('nav__list--active'); });

Answer 2

我会寻求一种完全避免导航高度的解决方案。这样，您就可以在导航中获得$.fn.height()的有效结果，并且可以避免使用动画元素尺寸的已知问题（抖动，height: auto限制等）。

您的用例的可行选项是transform: translateY()。

注意：示例和小提琴仅包含-webkit-前缀。

对于hidden州和过渡：

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

对于visible个州：

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

...

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

这意味着在.nav上有一些额外的“清理”样式。在这里看到它： http://jsfiddle.net/b24Ft/1/

响应式导航'max-height'问题（CSS3过渡）

2 个答案: