当浏览器宽度减小而不是显示一瞥时立即隐藏导航

Question

我想在浏览器大小减小到响应式时立即隐藏导航。我正在使用媒体查询来控制导航布局。我编写的代码正在运行，但是当我减小浏览器宽度时，它仍然会向我显示导航的一瞥，然后向左滑动，而不是立即隐藏自身等待单击菜单按钮。

请看codepen：http://codepen.io/rezasan/pen/wWNxjR

HTML

<header>
  <div id="menu-toggle">MENU</div>
  <div class="header-bottom">
    <nav class="clearfix" id="topMenu">
      <div class="nav-group">
        <ul class="main-nav">
          <li><a href="about.html">About</a></li>
          <li><a href="expertise.html">Expertise</a></li>
          <li><a href="projects.html">Projects</a></li>
          <li><a href="process.html">Process</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
    </nav>
  </header>

CSS

@media only screen and (max-width: 65em){

#menu-toggle{
        width: 35px;
        height: 50px;
        position: absolute;
        top:0;
        cursor: pointer;
        left:0;
        color:red;
    }

.header-bottom{
        transform:translateX(-100%);
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        -ms-transform:translateX(-100%);
        top:0;
        height: 100%;
        left: 0;
        width: 100%;
        background-color: #000;
        z-index: 1;
        transition:transform 0.5s cubic-bezier(.91,.12,.46,.8);
        -webkit-transition:-webkit-transform 0.5s cubic-bezier(.91,.12,.46,.8);
        -moz-transition:-moz-transform 0.5s cubic-bezier(.91,.12,.46,.8);
        -ms-transition:-ms-transform 0.5s cubic-bezier(.91,.12,.46,.8);
        -o-transition:-o-transform 0.5s cubic-bezier(.91,.12,.46,.8);
    }

   .slide{
        transform:translateX(-0%);
        -webkit-transform:translateX(-0%);
        -moz-transform:translateX(-0%);
        -o-transform:translateX(-0%);
    }

}

JS

$('#menu-toggle').click(function(){
        $('.header-bottom').toggleClass('slide');
});

Answer 1

所以我想通了。我需要先 display:none 隐藏导航

.header-bottom{
    transform:translateX(-100%);
    -webkit-transform:translateX(-100%);
    -moz-transform:translateX(-100%);
    -o-transform:translateX(-100%);
    -ms-transform:translateX(-100%);
    top:0;
    height: 100%;
    left: 0;
    width: 100%;
    background-color: #000;
    z-index: 1;
    transition:transform 0.5s cubic-bezier(.91,.12,.46,.8);
    -webkit-transition:-webkit-transform 0.5s cubic-bezier(.91,.12,.46,.8);
    -moz-transition:-moz-transform 0.5s cubic-bezier(.91,.12,.46,.8);
    -ms-transition:-ms-transform 0.5s cubic-bezier(.91,.12,.46,.8);
    -o-transition:-o-transform 0.5s cubic-bezier(.91,.12,.46,.8);
    display:none;
}

在JS上，需要fadeToggle和toggleClass。

$('#menu-toggle').click(function(){
    $('.header-bottom').fadeToggle().toggleClass('slide');
});

Answer 2

您需要做的就是更改以下 css：

.header-bottom{
    transform:translateX(-101%);
        -webkit-transform:translateX(-101%);
        -moz-transform:translateX(-101%);
        -o-transform:translateX(-101%);
        -ms-transform:translateX(-101%);
}

你可以在 CodePen 上试一试。