jquery - Bootstrap CSS过渡不起作用

由于某些未知的原因，当我尝试向引导下拉菜单添加过渡时，它将无法正常工作。但是，如果我使用chrome开发人员工具，并手动打开/关闭不透明度，它将经历过渡。

http://jsfiddle.net/mtkzrbn0/

.dropdown .dropdown-menu {
    transition: opacity 0.25s ease;
    opacity: 0;
}

.dropdown.open .dropdown-menu {
    opacity: 1;
}

最佳答案

您不能将过渡与disblay：none，display：block（在show下拉菜单中使用该引导程序）结合使用；

因此，您可以将元素设置为visible：hidden，并在打开时将其切换为visible：visible。

.dropdown .dropdown-menu {
    transition: opacity 0.25s ease;
    opacity: 0;
    display: block;
    visibility: hidden;
}
.dropdown.open .dropdown-menu {
    visibility: visible;
    opacity: 1;
    height: auto;
}

http://jsfiddle.net/mtkzrbn0/1/

关于jquery - Bootstrap CSS过渡不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30143769/