调整窗口大小后重置切换的类

Question

我正在尝试使我的移动菜单的行为与本网站上的一样： www.wearenation.co.uk

在我引用的网站上，如果您在宽度

现在，单击我的移动导航“汉堡”会切换四个单独的类：

//---HTML---//

<button class="burger navbar-toggler navbar-toggler-right" 
type="button" id="button">
  <span class="sr-only">Toggle Navigation</span>
  <div class="topping"></div><!-- Need 'topping' css -->
</button>

//---jQuery---//

//Toggles 'burger' animation
$('.burger').click(function(){
 $(this).toggleClass('active');
});

//Toggles white-bg to cover content when menu slides out
$("#button").click(function() {
 $('.cloak-hide').toggleClass('cloak-hide-active');
});

//Toggles menu transform 
$("#button").click(function() {
 $('.menu-transform').toggleClass('menu-transform-active');
});

//Fades in Text on Mobile Nav
$("#button").click(function() {
 $('.mobile-nav-transition').toggleClass('mobile-nav-transition-
active');
});

到目前为止，我只是在宽度 > 768px 时使用 CSS 媒体查询“隐藏”移动菜单。

问题是：导航仍然处于活动状态，只是被隐藏了。如果您将窗口 back 调整为 我正在尝试弄清楚如何使 >768px 宽度调整大小完全重置导航，因此当您返回到较小的宽度时它不会处于活动状态。

这涉及将不同的类（.burger、.cloak-hide 等）附加到窗口宽度 > 768 像素时触发的事件。我试图找出在不触发 CSS 转换的情况下“重新切换”类的最佳方法。

举个例子：当汉堡被点击时，“menu-transform-active”被添加到一个“menu-transform”类的元素中，从“transform: translate3d(100, 0,0)' 到'转换： translate3d(0,0,0)'。在调整窗口大小 >768px 时，该值需要立即恢复为默认值立即，而不触发“过渡：所有 0.5 秒立方贝塞尔曲线（0.17、0.04、0.03、0.94）；”添加到“菜单转换”类中。

我一直在尝试几种不同的方法来实现这一点，但到目前为止还没有运气。

这是移动导航 HTML

<div class="mobile-menu menu-transform d-flex flex-column">
<div class="logo-top-margin"><a href="index.html" class="no-click logo 
white-text">Company</a></div>

<ul class="subtitle mb-auto mt-auto textdiv">

    <li class="menu-list-element">
      <a href="index.html">
        <div class="resp-font-menu mobile-nav-transition white-text">
          Home
        <span class="underline menu-underline white-text">
        </div>
      </a>
    </li><!-- menu-list-element -->

    <li class="menu-list-element">
      <a href="work.html">
        <div class="resp-font-menu mobile-nav-transition white-text">
          Work
        <span class="underline menu-underline white-text">
        </div>
      </a>
    </li><!-- menu-list-element -->

    <li class="menu-list-element">
      <a href="about.html">
        <div class="resp-font-menu mobile-nav-transition white-text">
          About
        <span class="underline menu-underline white-text">
        </div>
      </a>
    </li><!-- menu-list-element -->

    <li class="menu-list-element">
      <a href="contact.html">
        <div class="resp-font-menu mobile-nav-transition white-text">
          Contact
        <span class="underline menu-underline white-text">
        </div>
      </a>
    </li><!-- menu-list-element -->

  </ul><!-- subtitle -->

<ul class="menu-footer-content mobile-nav-transition subtitle textdiv">
<li class="mb-2 d-flex">
  <a class="d-flex" href="#">
    <span class="white-text ml-2 align-items-
center">#</span></a>
</li>
<li class="mb-1">
  <ul class="social subtitle p-0 d-flex align-items-center">
    <li class="mr-3">
      <a class="d-flex">
      </a>
    </li>
    <li class="mr-3">
      <a class="d-flex">

      </a>
    </li>
    <li class="mr-3">
      <a class="d-flex">

      </a>
    </li>
  </ul><!-- social -->
</li><!-- mb-1 -->
<li>
  <a href="#" target="_blank">
    <span class="white-text">SoandsoCo.</span>
  </a>
</li>
</ul><!-- menu-footer-content -->
</div><!-- mobile-menu -->

...以及相关的 CSS

//Hide page content when mobile nav is active

.cloak{
    opacity: 1;
}
.cloak-hide{
    -webkit-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    -moz-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    -o-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    -ms-transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
    transition: all .2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
.cloak-hide-active{
    opacity: 0;
}

//Reveal Mobile Nav Text

.mobile-nav-transition{
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -ms-transition: all .2s linear;
    transition: all .2s linear;
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    -ms-transition-delay: .3s;
    transition-delay: .3s;
    opacity: 0;
}
.mobile-nav-transition-active{
    opacity: 1;
}

//Apply x-axis transform

.menu-transform {
  -webkit-transition: all .5s cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -moz-transition: all .5s cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -o-transition: all .5s cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -ms-transition: all .5s cubic-bezier(0.17, 0.04, 0.03, 0.94);
  transition: all .5s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
.menu-transform-active {
  transform: translate3d(0,0,0)
}

欢迎任何反馈、建议或建设性批评！

Answer 1

当屏幕宽度超过 768 像素时，您可以使用 jQuery resize 事件删除所有活动类。

$(window).resize(function() {
  var sWidth = $( window ).width();
  if(sWidth > 768) {
    $('.burger').removeClass('active');
    $('.cloak-hide').removeClass('cloak-hide-active');
    $('.menu-transform').removeClass('menu-transform-active');
    $('.mobile-nav-transition').removeClass('mobile-nav-transition-active');
  }
});

Answer 2

如果您将转换设置为它们自己的类，您可以切换动画运行的能力。这将允许您在不发生转换的情况下“立即”停用菜单。

因此，不要只是切换不透明度状态，而是先切换过渡状态，然后设置不透明度。如果过渡类在那里，它就会动画，如果不是，它就不会。我会说你所拥有的很接近。

正如@Dan Philip 提到的那样； $(window).resize() 是您检测调整大小事件的方法。