Question

当我点击关闭按钮时尝试让我的菜单淡入点击，淡出效果时，我遇到了一些问题。当我添加淡入淡出的脚本（下面是我正在使用的）时，它会显示一个奇怪的fadein故障，可以在这里看到https://jsfiddle.net/7u6q6jzu/3/。发生的事情似乎是菜单被加载然后添加了fadein脚本。我使用错误的剧本还是我错过了什么？任何帮助都会很棒。

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

删除过渡

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

您会同时应用淡入淡出效果和过渡效果。所以你得到了“双重淡化”效果。删除过渡消除了这一点，只是应用你正常的淡出/效果

单击时淡入菜单

1 个答案: