Bootstrap 3下拉菜单过渡效果

Question

首先这是 fiddle 示例

这是一个普通的Bootstrap下拉菜单，我对CSS进行了一些更改，使得下拉菜单在鼠标悬停时出现（而不是点击），但我想要一个非常简单的渐变动画。我尝试了CSS过渡效果，但它没有起作用，因为.dropdown-menu元素具有“display: none”的属性，当鼠标悬停时，它会更改为“display: block”。如何为从“diplay: none”更改为“display: block”的元素添加动画效果，或者是否有其他方法可以实现这一效果？

我已经搜索了一些答案，但它们并没有帮助到我。

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代码：

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

- chandan

---

你的下拉菜单在悬停时似乎已经正确地淡入/淡出（基于从0到1的不透明度变化的过渡）。我增加了淡入时间，使其更加明显。如果你愿意接受这种解决方案，也有jQuery的解决方案可用。http://jsfiddle.net/5zr4r/147/ - Will

@Will：是的，它可以工作，谢谢你的演示，但问题仍然存在，我该如何确保它出现在我的演示中？ - chandan

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

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

需要更改可见性，因为下拉菜单的不透明度为0，但仍然存在。您可以通过在按钮下方悬停来检查此内容。通过更改可见性，您的下拉菜单只会在悬停在按钮上时出现。

- Ilker Cat

Answer 2

您可以使用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;
}

您的fiddle更新版本: http://jsfiddle.net/pjej7o2m/1/

这是一个jQuery脚本，可能作为悬停在div上的替代方法（仍然使用CSS过渡属性来控制不透明度）。

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

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

更新的 JSFiddle： http://jsfiddle.net/pjej7o2m/2/

- Will

---

我确实考虑过这个方法，但在我的情况下行不通，因为菜单旁边有一个幻灯片，当我鼠标悬停在下拉菜单附近时，它会变成opacity:1。这将与z-index一起工作。我将显示更改为block，但将z-index更改为-1，在悬停时再将其更改回10。但肯定有更好的解决方案。感谢您的答复。 - chandan

这更像是一种hack而不是解决方案。 - chandan

是的，CSS hover绑定到父div上，这就是为什么当你在按钮侧面悬停时会出现效果。我添加了一个jQuery解决方案，这也可能适用于您。 - Will

谢谢您提供的JS解决方案，但一定有更好的方法，因为很多网站都在使用。我需要进行更深入的研究。谢谢。 - chandan