Bootstrap 3 dropdown transition

Question

Firstly here's the fiddle

Just a regular bootstrap dropdown, I made a few changes to css so that the dropdown appears on hover (instead of click) but how do I want a very simple fade animation. I tried css transition but it didn't work because the .dropdown-menu element has a 'display: none' applied to it, on hover it changes to 'display: block'. How do I animate an element which changes from 'diplay: none' to 'display: block' or is there any other method to achieve this?

I've already googled this and found out some answer but they didn't help.

HTML Code:

<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 Code:

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

Answer 1

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

Just add display:block and visibility:hidden; to .dropdown .dropdown-menu {. Then add visibility: visible to .dropdown:hover .dropdown-menu { and you are done.

You need to change visibility since the opacity of the dropdown menu is 0 but it is still there. You can check this by hovering under your button. By changing the visibility your dropdown menu will only be there when your button gets hovered.

Answer 2

You can override the default style of display:none with display:block, since you're also using opacity:0 to hide the menu. Give the following CSS a try and see if that accomplishes what you need. I've updated the transition speed to make the effect more apparent.

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

Updated version of your fiddle: http://jsfiddle.net/pjej7o2m/1/

Here's a jQuery script that might work as an alternative to hovering over the div (still using the css transition properties for opacity)

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

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

Updated fiddle: http://jsfiddle.net/pjej7o2m/2/