CSS-3转换错误，菜单出现卡住。
我正在使用这个名为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 ：正如您在关闭时看到没有动画，菜单就会消失，现在这个bug发生在页面滚动超过
200px+和992px宽度以下时，所以基本上当您单击汉堡包时，菜单会以旋转动画打开，但是当您再次单击汉堡包时，菜单有时不会关闭，即使“显示”类已从菜单中删除。
这是我无法理解的错误之一，在控制台中检查并检查JS代码只是没有真正的帮助。
如果有人能指出我在这里做错了什么，我会非常感激的，因为JS和CSS看起来真的很完美，但是使用临时转换的css转换并不像预期的那样工作。
回答 4
Stack Overflow用户
发布于 2016-04-20 12:34:07
正如前面提到的，似乎是Chrome错误，我试着在您的演示中编辑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
}Stack Overflow用户
发布于 2016-04-24 05:55:42
解决你的问题的另一种方法。
我发现的问题是，在较小的屏幕上，你的迷你菜单出现在点击汉堡包图标。但当再次点击汉堡包图标时，它不会消失。
但是，如果滚动窗口，它将立即消失。因此，我在if语句中添加了两行代码，它们实际上将窗口1px向下滚动，然后1px向上滚动(以保持文档的位置不变)。在if语句中添加以下代码(在return false;行之前)。
window.scrollBy(0, 1);
window.scrollBy(0, -1);Stack Overflow用户
发布于 2016-04-20 11:54:40
我认为您的错误在于您使用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');
})https://stackoverflow.com/questions/36677209
复制相似问题
腾讯云开发者
