Возможно ли, чтобы выпадающее меню Twitter Bootstrap вышло из строя?

Я пытаюсь получить стандартное меню выпадающего меню на Twitter Bootstrap, чтобы исчезнуть, а не просто появиться. Я попытался добавить классы fade и in, но он не исчезает. Вот моя скрипка http://jsfiddle.net/byronyasgur/5zr4r/10/.

Я пробовал об этом по-другому: например, ответ на этот вопрос, но по какой-то причине у меня возникли проблемы с настройкой триггера выпадающего списка с помощью jquery.

Ответы

Ответ 1

Играя с этим, похоже, что анимация CSS работает лучше всего.

.open > .dropdown-menu {
  animation-name: slidenavAnimation;
  animation-duration:.2s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

  -webkit-animation-name: slidenavAnimation;
  -webkit-animation-duration:.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: slidenavAnimation;
  -moz-animation-duration:.2s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: forwards;
}
@keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Вы можете добавить другие свойства CSS, чтобы сделать более сложные анимации. Например, я играл с левым: -30 → влево: 0.

Ответ 2

Я хотел бы представить современный подход, основанный только на CSS:

.dropdown-menu.fade {
  display: block;
  opacity: 0;
  pointer-events: none;
}
.open > .dropdown-menu.fade {
  pointer-events: auto;
  opacity: 1;
}

Это позволяет .fade обрабатывать анимацию перехода, но .open - это то, что контролирует непрозрачность и состояние указателя.

Ответ 3

Возможно, что-то подобное с помощью jQuery:

$(function() {
    $('.dropdown-toggle').click(function() {
        $(this).next('.dropdown-menu').fadeToggle(500);
    });
});

Вы можете поиграть здесь: http://jsfiddle.net/5zr4r/15/

ОБНОВЛЕНИЕ: Я забыл сказать, что вы должны удалить fade in из ul.

Ответ 4

Я тоже нашел приятное решение:

// Add slideDown animation to dropdown
$('.dropdown').on('show.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});

// Add slideUp animation to dropdown
$('.dropdown').on('hide.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

Пример: http://codepen.io/danielyewright/pen/EvckL

Ответ 5

Небольшая настройка в Jason Featheringham answer, которая работает в Bootstrap 4.

.dropdown-menu.fade {
   display: block;
   opacity: 0;
   pointer-events: none;
}

.show > .dropdown-menu.fade {
   pointer-events: auto;
   opacity: 1;
}

Ответ 6

Вы можете попробовать следующее:

// Add fadeToggle animation to dropdown       
$('.dropdown').on('show.bs.dropdown', function(e) {   
  $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
}); 

// Add fadeToggle animation to dropdown 
$('.dropdown').on('hide.bs.dropdown', function(e) { 
  $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
});

Он использует существующие функции show.bs.dropdown и hide.bs.dropdown Bootstrap и изменяет эффект выпадающего списка на "затухание" вместо "появляться". Вы также можете изменить fadeToggle() на slideDown(), если вы хотите использовать "слайд". Надеюсь, это поможет.

Вот скрипка: http://jsfiddle.net/ck5c8/