CSS-3 转换错误，菜单卡住

Question

我正在使用这个名为 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，（很抱歉，fiddle 只是没有重现这个问题。）

BUG: As you can see on close there is no animation, the menu goes away, now this bug occurs when the page is scrolled more than 200px+ and below 992px width, so basically when you click on the hamburger, the menu opens with a rotate animation but when you click the hamburger again the menu sometimes doesn't close even though the 'show' class has been removed form the menu.

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

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

Answer 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');
})

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

Answer 3

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

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

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

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

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

享受...

CSS-3 转换错误，菜单卡住

CSS-3 Transform bug, menu appearing stuck

html

javascript

css

jquery