Question

在我的网站中，我有许多叠加，有两个不同的过渡。一个用于菜单覆盖，在顶部淡入，一个用于页面覆盖，可以水平推送主要内容。

当用户点击菜单汉堡包按钮时，会打开一个叠加层。当前单击菜单选项链接会创建仅在用户打开页面叠加时应用的转换。当.wrap-open类被添加到.wrap水平推送主内容时发生转换。这会产生消隐屏幕白色的不利影响，但实际上应该从.wrap中删除.wrap-open。

JS Fiddle 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

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript（叠加菜单）关闭过渡

1 个答案: