Javascript Bootstrap 3 下拉转换

Bootstrap 3 dropdown transition

提问by chandan

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?

只是一个常规的引导下拉菜单，我对 css 进行了一些更改，以便下拉菜单出现在悬停（而不是单击）时，但是我想要一个非常简单的淡入淡出动画。我尝试了 css transition 但它没有用，因为 .dropdown-menu 元素有一个 'display: none' 应用于它，悬停时它会更改为 'display: block'。如何为从“diplay：none”更改为“display：block”的元素设置动画，或者是否有其他方法可以实现此目的？

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

我已经用谷歌搜索了这个并找到了一些答案，但他们没有帮助。

HTML Code:

HTML代码：

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

CSS 代码：

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

回答by Ilker Cat

.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:blockand visibility:hidden;to .dropdown .dropdown-menu {. Then add visibility: visibleto .dropdown:hover .dropdown-menu {and you are done.

只需添加display:block和visibility:hidden;到.dropdown .dropdown-menu {。然后添加visibility: visible到.dropdown:hover .dropdown-menu {你就完成了。

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.

您需要更改可见性，因为下拉菜单的不透明度为 0 但它仍然存在。您可以通过将鼠标悬停在按钮下方来检查这一点。通过更改可见性，您的下拉菜单只会在您的按钮悬停时出现。

回答by Will

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.

您可以使用 display:block 覆盖 display:none 的默认样式，因为您还使用 opacity:0 来隐藏菜单。试试下面的 CSS，看看它是否能满足您的需求。我更新了过渡速度以使效果更加明显。

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

小提琴的更新版本：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)

这是一个 jQuery 脚本，它可以替代悬停在 div 上（仍然使用 css 过渡属性来设置不透明度）

$(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/

更新小提琴：http: //jsfiddle.net/pjej7o2m/2/