javascript - 单击时淡入菜单

Question

我在尝试让我的菜单在单击时淡入时遇到了一个小问题，一旦我按下关闭按钮，淡出就会起作用。当我在脚本中添加淡入淡出时(下面是我正在使用的)，它会显示一个奇怪的淡入淡出故障，可以在此处看到 https://jsfiddle.net/7u6q6jzu/3/ .发生的事情是菜单似乎已加载，然后添加了淡入淡出脚本。我是在使用错误的脚本还是遗漏了什么？任何帮助都会很棒。

 $(function() { // Onload
      $(".open-overlay").click(function() {
          $(".overlay").fadeIn(1000);
      });
      $(".close-overlay").click(function() {
          $(".overlay").fadeOut(1000);
      });

 });

这是我的菜单代码。此脚本打开菜单并使用滚动条来显示溢出菜单，而不是使用辅助滚动条。

 var body = document.body,
 overlay = document.querySelector('.overlay'),
 overlayBtts = document.querySelectorAll('div[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {
"use strict";
  btt.addEventListener('click', function() { 

     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';

     /* Toggle the aria-hidden state on the overlay and the no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);
     /* On some mobile browser when the overlay was previously opened and scrolled, if you open it again it doesn't reset its scrollTop property */
     overlay.scrollTop = 0;
  }, false);
 });  

Answer 1

只需删除您的过渡时间

.overlay {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
 }

fiddle example

Remove transitions

 -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;

发生的情况是您同时应用淡入淡出效果和过渡效果。所以你会得到一个“双重淡入淡出”的效果。删除过渡可以摆脱这种情况，只应用正常的淡出/淡入效果