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;

});

ДЕМО ЗДЕСЬ, (извините, скрипка просто не воссоздает эту проблему.)

ОШИБКА. Как видно, при закрытии анимации нет, меню уходит, теперь эта ошибка возникает, когда страница прокручивается больше, чем 200px+ и ниже 992px width, поэтому в основном при нажатии на гамбургер, меню открывается с анимацией вращения, но когда вы нажмите гамбургер снова, меню иногда не закрывается, хотя класс 'show' был удален из меню.

Это одна из этих ошибок, которая находится вне меня, проверка на консоли и переход через JS-код просто не помогли.

Я был бы очень признателен, если бы кто-нибудь мог указать, что я делаю неправильно здесь, поскольку JS и CSS действительно кажутся совершенными, но css-преобразования с использованием транзита просто не работают, как ожидалось.

Ответы

Ответ 1

Как уже упоминалось, это ошибка 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
}

Ответ 2

Альтернативное решение вашей проблемы.

Я обнаружил, что на небольших экранах ваше мини-меню отображается щелчком мыши по иконке гамбургера. Но он не исчезает при нажатии на значок гамбургера.

Тем не менее, он сразу исчезает, если вы прокручиваете окно. Итак, я добавил две строки внутри оператора if, который фактически прокручивает окно 1px вниз, а затем 1px вверх (чтобы сохранить положение документа тем же). Добавьте следующий код в свой оператор if (до строки return false;).

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

Ответ 3

Я думаю, что ваша ошибка в том, что вы используете событие 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');
})

Ответ 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;
        }
    }

ENJOY...