响应式导航'max-height'问题(CSS3 过渡)

Question

我想创建一个具有"向下滑动"效果的响应式导航。我不想使用jQuery的.slideDown()或.slideToggle()，而只想使用CSS3转换。我知道的唯一方法是使用max-height来模仿这种效果。

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

此导航存在两个问题：

1. 目前，我正在使用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;这样的解决方案.但这似乎对我不起作用。

2. 我想通过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

我会选择一种完全避免导航高度的解决方案。这样，您将始终获得有效的导航$.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/

Answer 2

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

例

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