Меню открывается с задержкой - Bootstrap4

Тема в разделе "JavaScript", создана пользователем AlexGood, 5 июн 2018.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    http://testbcard.dtraduga.vh55.hosterby.com/
    Разрешение 767 и меньше. Справа вверху появляется бургер http://joxi.ru/823pZ11fJV919A. При нажатии на него меню выпадающее открывается с какой-то непонятной паузой(задержкой) и не плавно выезжает а резко.
    Само меню реализовано на bootstrap 4. Из-за чего это все происходит не могу разобраться. :Help:
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Вот причина проблемы:
    Код:
    .my_navbar {
        display: none;
    }
    Если меню изначально невидимо, оно не может плавно развернуться, ибо оно становится видимо только после завершения анимации разворачивания (отсюда и задержка). То есть, на самом деле оно то плавно разврачивается, но в тот момент оно ещё невидимо.

    Вообще, display: none - это больше, чем просто невидимость, это практически равноценно тому, что блока с этим свойством вообще нет на странице!


    В данном случае мне непонятно, зачем вообще было добавлено это свойство в собственных стилях, если за меню отвечает Бутстрап, где класс collapse и так скрывает это меню.
     
    AlexGood нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Dotrox, ВЫ ГЕНИЙ :Good:, я уже хотел меню переделывать потому что уже не мог найти причины. Убрал и открываться стало как положено (это видимо я что-то намутил). С закрытием пауза я так понимаю тоже из-за какой-то мелочи?
     
  4. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Нашел в чем прикол был при закрытии. В меню были такие стили:
    Код:
    .my_navbar {
        height: 100vh;
        text-align: left;
        padding-left: 30px;
        padding-top: 30px;
        margin-top: 0px;
        background-color: #030f41;
        opacity: 0.85;
    }
    Все было из-за height: 100vh;, ну т.е. понятно задает 100% высоты видимой области. Вычислить вычислил, но кто объяснит неужели из-за этого могла быть задержка при закрытии?
     
  5. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Снова та же история: если меню задана высота на всё окно браузера, то как оно может плавно свернуться, если сворачивание подразумевает сокращение высоты? Поэтому оно просто ничего не делало пока длилась анимация сворачивания, а потом исчезало, когда Бутстрап навешивал класс collapse.

    Если вы начнёте воспринимать вёрстку, как реальные физические объекты, а не просто код, у вас перестанут возникать такие вопросы.
     
    AlexGood нравится это.
  6. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Новый прикол. Сразу не заметил. Когда убрал height: 100vh; все стало открываться как положено без глюков, но меню перестало скролится теперь :(

    Решение нашел путям задания 100vh самому ul вложенному в navbar:
    Код:
    div.my_navbar>ul{
        height: 100vh;
    }
     
    Последнее редактирование: 7 июн 2018