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