Question

首先是fiddle

只是一个常规的引导程序下拉列表，我对css进行了一些更改，以便在悬停时显示下拉列表（而不是单击），但我怎么想要一个非常简单的淡入淡出动画。我尝试过css过渡但是它没有用，因为.dropdown-menu元素有一个显示：none＆＃39;应用于它，在悬停时它会变为显示：阻止＆＃39;。如何设置从＆＃39; diplay：none＆＃39;更改的元素的动画。显示：阻止＆＃39;还是有其他方法来实现这个目标吗？

我已经使用Google搜索并发现了一些答案，但他们没有帮助。

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

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

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

您需要更改可见性，因为下拉菜单的不透明度为0，但它仍然存在。您可以将鼠标悬停在按钮下进行检查。通过更改可见性，您的下拉菜单将仅在您的按钮被悬停时存在。

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

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

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

Bootstrap 3下拉过渡

2 个答案: