javascript - Bootstrap 3 下拉过渡

Question

首先是fiddle

只是一个常规的 Bootstrap 下拉菜单，我对 css 做了一些更改，以便下拉菜单出现在悬停时(而不是单击)，但我如何想要一个非常简单的淡入淡出动画。我尝试了 css transition，但它没有用，因为 .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;
}

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，但它仍然存在。您可以通过将鼠标悬停在按钮下方来进行检查。通过更改可见性，您的下拉菜单只会在您的按钮悬停时出现。