Javascript (Overlay Menu) Schließen Übergang

Question

In meiner Website habe ich eine Reihe von Überlagerungen mit zwei verschiedenen Übergängen. Eine für die Menüüberlagerung, die oben eingeblendet wird, und eine für Seitenüberlagerungen, die den Hauptinhalt horizontal verschiebt.

Wenn ein Benutzer auf den Menühamburger-Knopf klickt, öffnet sich ein Overlay. Wenn Sie auf einen Link zu einer Menüoption klicken, wird ein Übergang erstellt, der nur angewendet werden soll, wenn ein Benutzer ein Seiten-Overlay öffnet. Der Übergang findet statt, wenn die Klasse .wrap-open zu .wrap hinzugefügt wird und der Hauptinhalt horizontal verschoben wird. Dies erzeugt einen nachteiligen Effekt des Ausblendens des Bildschirms, weiß aber, dass .wrap-open von .wrap entfernt werden sollte.

JS Fiddle https://jsfiddle.net/te0s2e86/4/

Klicken auf den Link 1 und Link 2 funktioniert gut, aber Klicken auf einen Menü-Link einmal tötet die Erfahrung eröffnet.

Meine Frage: Wie behebe ich das, damit ich den Übergangseffekt für Page Overlays behalte, aber es entferne, wenn das Menü geschlossen wird, indem ich auf eine Menüoption klicke?

JS-Code:

(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>