jquery - 响应式导航 '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 限制等)。 ) 具有动画元素尺寸。

您的用例的可行选择是例如转换:translateY()。

注意:示例和 fiddle 仅包含 -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 上有一些额外的“清理”样式。在这里看到它的实际效果: http://jsfiddle.net/b24Ft/1/