javascript - Bootstrap 3 dropdown transition - Stack Overflow

admin管理员组

文章数量:1198383

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

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

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Sep 16, 2014 at 18:42 chandanchandan 1,57444 gold badges2424 silver badges5252 bronze badges 2

• 1 Your dropdown appears to be fading in/out correctly on hover already (transition based on opacity change from 0 to 1). I increased the fade time so it's more apparent. There are jQuery solutions available as well if you're open to that solution. jsfiddle.net/5zr4r/147 – Will Commented Sep 16, 2014 at 19:07
• @Will: Yes it works, thank you for the demo, but still the problem remains, how do I make sure it appears on my demo? – chandan Commented Sep 16, 2014 at 19:54

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 11

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

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/

本文标签： javascriptBootstrap 3 dropdown transitionStack Overflow