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

CSS-3 Transform bug, menu appearing stuck

本文关键字：菜单 转换 错误 CSS-3      更新时间：2023-09-26

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

在这里演示，（很抱歉，小提琴没有重现这个问题。）

BUG：正如你在关闭时看到的那样，没有动画，菜单消失了，现在当页面滚动超过200px+和低于992px的宽度，所以基本上当你点击汉堡包，菜单以旋转动画打开，但当您再点一次汉堡，菜单有时也关不上"show"类已从菜单中删除。

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

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

如前所述，这似乎是一个Chrome错误，我尝试在您的演示中编辑CSS，这个解决方案似乎有效。。。尝试在-1中添加一个"z索引"：

@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语句中添加以下代码（在return false;行之前）。

window.scrollBy(0, 1);
window.scrollBy(0, -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');
})

这是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;
        }
    }

享受。。。

相关文章：