Javascript（叠加菜单）关闭过渡

Question

在我的网站上，我有许多具有两个不同过渡的叠加层。 一个用于菜单叠加层（顶部淡入），另一个用于页面叠加层（水平叠加）。

当用户单击菜单汉堡包按钮时，将打开一个覆盖图。 当前，单击菜单选项链接会创建一个过渡，该过渡仅应在用户打开页面叠加层时应用。 当将.wrap-open类添加到.wrap时，会发生过渡，从而水平推送主要内容。 这会产生使屏幕变黑的不利影响，但实际上应从.wrap中删除.wrap-open。

JS小提琴 https://jsfiddle.net/te0s2e86/4/

单击链接1和链接2效果很好，但是一旦打开菜单，单击菜单链接会破坏体验。

我的问题：如何解决此问题，以便保留页面覆盖的过渡效果，但是在通过单击菜单选项关闭菜单时将其删除？

JS代码：

(function() {
  var triggerBtn = $('.trigger-overlay'), 
      closeBtn = $('.overlay-close'), 
      wrap = $('.wrap'), 
      closeMenu = $('.menu-close'), 
      transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
         },
      transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
      support = { transitions: Modernizr.csstransitions
         };

  function toggleOverlay() {
    var data_href = $(this).attr('data-href'), is_menu = ( data_href == "menu" ), overlay = $('#'+ data_href );
        if(!is_menu) $('.wrap-open,.close,.zap').removeClass('wrap-open').removeClass('close').removeClass('zap');

    // If overlay is open
    if (overlay.hasClass('zap')) {

      overlay.removeClass('zap').addClass('close');
      wrap.removeClass('wrap-open');

      var onEndTransitionFn = function(ev) {
        if (support.transitions) {
          if (ev.propertyName !== 'visibility') return;
          this.removeEventListener(transEndEventName, onEndTransitionFn);
        }
        overlay.removeClass('close');
      };

      if (support.transitions) {
        overlay.get(0).addEventListener(transEndEventName, onEndTransitionFn);
      } else {
        onEndTransitionFn();
      }
    }

    // If overlay isn't closed
    else if (!overlay.hasClass('close')) {

      if(!is_menu){wrap.addClass('wrap-open');}
      overlay.addClass('zap');
    }
    // If overlay is closed
    else if (overlay.hasClass('close')) {
      if(!is_menu){wrap.addClass('wrap-open');}
      overlay.addClass('zap');

    }
  }


  triggerBtn.each( function(idx){ $(this).click( toggleOverlay ); } );
  closeMenu.each( function(idx){ $(this).click( toggleOverlay ); } );
  closeBtn.each( function(idx){ $(this).click( function(evt){ $(this.parentNode).removeClass('zap'); $('.wrap').removeClass('wrap-open'); } ) } );


})();

Answer 1

 .overlay { position: fixed; top: 0; left: 0; height: 0; width: 100%; background-color: grey; overflow: auto; z-index: 99; text-align: center; padding-top: 0; transition: height 0.5s; } .overlayshow { height: 100%; padding-top: 100px; transition: height 0.5s, padding-top 0.5s; } button { position: relative; z-index: 100; } 

 document.querySelector('button').addEventListener('click', function (e) { document.querySelector('.overlay').classList.toggle('overlayshow'); }) 

 <nav> <button class="hamburger hamburger--squeeze" type="button"> <span class="hamburger-box"> <span class="hamburger-inner">button</span> </span> </button> <div class="overlay"> menu list goes hee </div> </nav>