CSS-3 转换错误，菜单出现卡住答案

【问题标题】：CSS-3 Transform bug, menu appearing stuckCSS-3 转换错误，菜单出现卡住
【发布时间】：2016-08-09 04:49:34
【问题描述】：

我正在使用这个名为 transit.js 的插件来创建一个简单的菜单动画，基本上我有以下菜单，见下文：

菜单的打开和关闭代码如下：

$('.main-header .nav-toggle-button').on('click' , function() {

    // $('.main-header .navigation').toggleClass('show');

    if ($('.main-header .navigation').hasClass('show'))  {
        $('.main-header .navigation').stop().removeClass('show');
        return false;
    }

    $('.main-header .navigation').stop().transition({
          perspective: '1000px',
          rotateY: '180deg',
          duration : 0
        }, function() {
          $(this).addClass('show').stop().transition({ rotateY: '0' });
        });

    return false;

});

DEMO HERE，（对不起，小提琴并没有重现这个问题。）

BUG：您可以在关闭时看到没有动画，菜单消失，现在当页面滚动超过 200px+ 及以下992px 宽度，所以基本上当你点击汉堡，菜单以旋转动画打开，但是当你再次单击汉堡，菜单有时不会关闭，即使 'show' 类已从菜单中删除。

这是我无法理解的错误之一，在控制台中检查并浏览 JS 代码并没有真正帮助。

如果有人能指出我在这里做错了什么，我将不胜感激，因为 JS 和 CSS 看起来确实很完美，但使用传输的 css 转换无法按预期工作。

【问题讨论】：

@MarcosPérezGude 将 chrome 置于“移动模式”，你会得到有问题的汉堡包。
你假设我使用的是 chrome :)，但是好的，我现在看到了（减小窗口大小）
这似乎是一个 Chrome 错误。菜单关闭后，只有在您在浏览器外部单击时才会消失，此时它会失去焦点。真奇怪。
是的，伙计们感谢您的热烈响应，这是 chrome 和 opera 的错误！没错，FF 工作正常：D
@AlexanderSolonik 你试过我的解决方法了吗？下面的答案？

标签： javascript jquery html css

【解决方案1】：

我认为您的错误是您使用 hover 事件来添加和删除动画，一旦您的鼠标悬停在元素上，他就会触发：

/* dropdown */

    $('.navigation .dropdown-menu-item').hover(function() {

      $('.navigation .dropdown-menu-item').find('.dropdown-menu-list').removeClass('opened');

      $(this).find('.dropdown-menu-list').stop().transition({ 'y' : '20px' , duration: 0 } , function() {
        $(this).addClass('opened').stop().transition({ 'y': 0 });
      });

      return false;

    }, function() {

      $(this).find('.dropdown-menu-list').removeClass('opened');

    });

使用mouseenter 和mouseleave 事件来添加和删除下拉列表动画，这样你就可以让事件触发并离开：

$(document).on('.navigation .dropdown-menu-item', 'mouseenter', function(){
  $('.navigation .dropdown-menu-item').find('.dropdown-menu-list').removeClass('opened');
  $(this).find('.dropdown-menu-list').stop().transition({ 'y' : '20px' , duration: 0 } , function() {
    $(this).addClass('opened').stop().transition({ 'y': 0 });
  });
  return false;
})

$(document).on('.navigation .dropdown-menu-item', 'mouseleave', function(){
  $(this).find('.dropdown-menu-list').removeClass('opened');
})

【讨论】：

他只会开火一次，当你真正需要开火时，当你的鼠标进入对象上以及他离开时
阅读关于悬停的文档，你可以指定2个功能，当你进入，当你离开。 stackoverflow.com/questions/17589420/…

【解决方案2】：

正如已经提到的似乎是一个 Chrome 错误，我尝试在您的演示中编辑 CSS，这个解决方案似乎有效...尝试在此处将“z-index”添加到 -1：

@media (max-width: 992px)
.navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    background: rgba(255,255,255,.95);
    z-index: -1; // ADD THIS
}

【讨论】：

【解决方案3】：

您的问题的替代解决方案..

我发现的问题是，在较小的屏幕上，您的迷你菜单会在单击汉堡图标时出现。但是当再次点击汉堡图标时它并没有消失。

但是，如果您滚动窗口，它会立即消失。所以，我在if 语句中添加了两行，它实际上将窗口1px 向下滚动，然后1px 向上滚动（以保持文档的位置相同）。在if 语句中添加以下代码（return false; 行之前）。

window.scrollBy(0, 1);
window.scrollBy(0, -1);

【讨论】：

【解决方案4】：

这是 css 解决方案... 这样您的菜单将顺利打开和关闭

在您的代码中添加以下 css 并改写

     @media(max-width:991px) {
        .navigation {
            transition: all 0.4s;
            -webkit-transition: all 0.4s;
            display: block;
            transform: rotateY(90deg) !important;
            -webkit-transform: rotateY(90deg) !important;
            perspective: 1000px !important;
            -webkit-perspective: 1000px !important;
            opacity: 0;
            visibility: hidden;
        }
        .navigation.show {
            display: block;
            opacity: 1;
            transform: rotateY(0deg) !important;
            -webkit-transform: rotateY(0deg) !important;
            visibility: visible;
        }
    }

享受...

【讨论】：