Is it possible to get Twitter Bootstrap Dropdown menus to fade in?

Question

I am trying to get the standard navbar dropdown menu on Twitter Bootstrap to fade in instead of just appear. I have tried adding the classes fade and in but it doesn't appear to fade. Here is my fiddle http://jsfiddle.net/byronyasgur/5zr4r/10/.

I have tried going about it another way - eg the answer on this question but I'm having trouble targeting the dropdown trigger with jquery for some reason.

Answer 1

Playing around with this, it looks like CSS animations work the best.

.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;
  }
}

You can add other CSS properties in order to make more complicated animations. For example, I've been playing with left: -30 -> left: 0.

Answer 2

I'd like to submit a modern, CSS-only approach:

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

This allows .fade to handle the transition animation, but .open is what controls the opacity and pointer state.

Answer 3

Small tweak to Jason Featheringham's answer that works in Bootstrap 4.

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

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

Answer 4

Maybe doing something like this with jQuery:

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

You can chek the fiddle here: http://jsfiddle.net/5zr4r/15/

UPDATE: I forgot to say that you should remove the fade in from the ul.

Answer 5

I found nice solution too:

// 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();
});

Example: http://codepen.io/danielyewright/pen/EvckL

Answer 6

You can try this:

// 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); 
});

It utilizes Bootstrap's existing show.bs.dropdown and hide.bs.dropdown functions and changes the dropdown effect to "fade" in instead of "appear". You can also change fadeToggle() to slideDown() if you want a "slide" in effect. Hope this helps.

Here is the fiddle: http://jsfiddle.net/ck5c8/