Arhn - архитектура программирования

Выпадающий переход Bootstrap 3

Во-первых, вот скрипта

Просто обычный раскрывающийся список начальной загрузки, я внес несколько изменений в css, чтобы раскрывающийся список появлялся при наведении курсора (вместо щелчка), но как я хочу очень простую анимацию затухания. Я попробовал переход css, но это не сработало, потому что к элементу .dropdown-menu применено «отображение: нет», при наведении он меняется на «отображение: блок». Как мне анимировать элемент, который меняется с «display: none» на «display: block», или есть ли другой способ добиться этого?

Я уже гуглил это и нашел какой-то ответ, но они не помогли.

HTML-код:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

CSS-код:

.dropdown .dropdown-menu{
opacity: 0;
transition:         all 400ms ease;
-moz-transition:    all 400ms ease;
-webkit-transition: all 400ms ease;
-o-transition:      all 400ms ease;
-ms-transition:     all 400ms ease;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}
javascript html jquery css twitter-bootstrap
16.09.2014

  • Ваше выпадающее меню уже корректно появляется/исчезает при наведении (переход основан на изменении непрозрачности с 0 на 1). Я увеличил время затухания, чтобы оно было более очевидным. Существуют также доступные решения jQuery, если вы открыты для этого решения. jsfiddle.net/5zr4r/147 16.09.2014
  • @Will: Да, это работает, спасибо за демонстрацию, но проблема остается, как мне убедиться, что она отображается в моей демонстрации? 16.09.2014

Ответы:


1

Вы можете переопределить стиль display:none по умолчанию с помощью display:block, так как вы также используете opacity:0, чтобы скрыть меню. Попробуйте следующий CSS и посмотрите, выполняет ли он то, что вам нужно. Я обновил скорость перехода, чтобы сделать эффект более очевидным.

.dropdown .dropdown-menu{
    display: block;
    opacity: 0;

    -moz-transition:    all 1000ms ease;
    -webkit-transition: all 1000ms ease;
    -o-transition:      all 1000ms ease;
    -ms-transition:     all 1000ms ease;
    transition:         all 1000ms ease;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}

Обновленная версия вашей скрипки: http://jsfiddle.net/pjej7o2m/1/

Вот скрипт jQuery, который может работать как альтернатива наведению курсора на div (все еще используя свойства перехода css для непрозрачности)

$(function(){
  var $menu = $('.dropdown-menu');

  $('.dropdown-toggle').hover(
    function() {
      $menu.css('opacity',1);
    },
    function() {
      $menu.css('opacity',0);
    });
})();

Обновленная скрипта: http://jsfiddle.net/pjej7o2m/2/

16.09.2014
  • Я думал об этом, но в моем случае это не сработает, потому что прямо рядом с меню есть слайд-шоу, когда я навожу указатель мыши на раскрывающийся список, он меняется на непрозрачность: 1. Это будет работать вместе с z-index. Я меняю отображение на блок, но меняю z-индекс на -1, при наведении курсора снова меняю его на 10. Но должно быть лучшее решение. Спасибо за ответ. 17.09.2014
  • Это больше похоже на взлом, чем на решение. 17.09.2014
  • Да, наведение css было привязано к родительскому div, поэтому эффект возникает, когда вы наводите курсор на кнопку сбоку. Я добавил решение jQuery, которое может подойти и вам. 17.09.2014
  • спасибо за js-решение, должен быть лучший способ, он есть на многих сайтах. Мне нужно провести еще немного исследований. 18.09.2014

    • 2 
    .dropdown .dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition:         all 0.2s  ease;
  -moz-transition:    all 0.2s  ease;
  -webkit-transition: all 0.2s  ease;
  -o-transition:      all 0.2s  ease;
  -ms-transition:     all 0.2s  ease;
}
.dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
}
.dropdown {
  display: inline-block;
}

    Просто добавьте display:block и visibility:hidden; к .dropdown .dropdown-menu {. Затем добавьте visibility: visible к .dropdown:hover .dropdown-menu {, и все готово.

    Вам нужно изменить видимость, так как непрозрачность выпадающего меню равна 0, но она все еще существует. Вы можете проверить это, наведя курсор на кнопку. Изменив видимость, выпадающее меню будет отображаться только тогда, когда ваша кнопка будет наведена.

    26.11.2014
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..