Fatal编程技术网
  • javascript/
  • Javascript CSS-3转换错误，菜单卡住

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

javascript jquery html css

Javascript CSS-3转换错误，菜单卡住,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用这个名为transit.js的插件创建一个简单的菜单动画，基本上我有以下菜单，请参见下文： 菜单的打开和关闭代码如下： $('.main-header .nav-toggle-button').on('click' , function() { // $('.main-header .navigation').toggleClass('show'); if ($('.main-header .navigation').hasClass('show')) {

我正在使用这个名为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;

});
，（很抱歉，小提琴无法重现此问题。）

错误：正如您在关闭时看到的，没有动画，菜单消失，现在当页面滚动超过 
200px+
及以下
992px
宽度，因此基本上当您单击 汉堡，菜单将以旋转动画打开，但当您 再次点击汉堡，菜单有时不会关闭，即使 “show”类已从菜单中删除

这是我无法理解的其中一个bug，在控制台中检查并浏览JS代码并没有真正起到作用

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

我认为您的错误在于您使用了
悬停事件来添加和删除动画，一旦鼠标移到元素上，他就会开火：


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



正如前面提到的，这似乎是一个Chrome bug，我试着在你的演示上编辑CSS，这个解决方案似乎很有效。。。尝试在此处将“z索引”添加到-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
}



你问题的另一种解决办法

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

但是，如果滚动窗口，它会立即消失。因此，我在
if
语句中添加了两行，这两行实际上是向下滚动窗口
1px
，然后向上滚动窗口
1px
（以保持文档的位置不变）。在
if
语句中添加以下代码（在
返回false之前；
行）

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

将以下css添加到您的代码中，并覆盖wright


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



享受……
@MarcosPérezGude将chrome置于“移动模式”，你会得到有问题的汉堡。你假设我使用chrome:），但好吧，我现在明白了（缩小窗口大小）这似乎是chrome的错误。菜单关闭后，只有在浏览器失去焦点时在浏览器外部单击时才会消失。真的很奇怪。是的，伙计们，谢谢你们压倒性的反应，这是一个chrome和opera错误！没错，FF很好用：D@AlexanderSolonik你试过我的变通方法吗？下面的答案是什么？他只会发射一次，当你真的需要发射时，当你的鼠标进入对象上方，当他离开时，你可以指定2个函数，当你进入时，当你离开时。

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