作者:幸福抉择2502901973 | 来源:互联网 | 2022-12-02 16:30
我正在为Bootstrap 4下拉列表设置动画,但是我有点挣扎。我已经运行了当前代码:
.navbar-nav .dropdown-menu
{
border:0px;
transform: translate3d(0px, -100%, 0px);
transition: opacity 300ms ease 0s, transform 300ms ease 0s;
margin: 5px 0px;
}
.navbar-nav .dropdown-menu.show
{
transform: translate3d(0px, 0px, 0px) !important;
opacity:1 !important;
}
和JS:
$('#navDrop').on('show.bs.dropdown', function () {
$(".overlay").fadeIn(150);
})
$('#navDrop').on('hide.bs.dropdown', function () {
$(".overlay").fadeOut(150);
})
但是CSS似乎根本没有触发?有人遇到过解决此问题的方法吗?
1> Akber Iqbal..:
您可以使用CSS来简化此操作...请注意,引导程序会在下拉列表中插入很多内联CSS,而这些CSS优先于jQuery fadeIn()
.dropdown .dropdown-menu{animation-name: example; animation-duration: 4s;}
@keyframes example {
from {opacity:.2}
to {opacity:1;}
}
Dropdown with just CSS
change the duration as you want