首先是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;
}
最佳答案
.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,但它仍然存在。您可以通过将鼠标悬停在按钮下方来进行检查。通过更改可见性,您的下拉菜单只会在您的按钮悬停时出现。
关于javascript - Bootstrap 3 下拉过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25876195/