jquery - Bootstrap CSS 过渡不起作用

Question

由于某些未知原因，当我尝试向 Bootstrap 下拉列表添加过渡时，它不起作用。但是，如果我通过 chrome 开发人员工具，并手动打开/关闭不透明度，它将完成过渡。

http://jsfiddle.net/mtkzrbn0/

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

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

Answer 1

您不能将 transition 与 disblay: none, display: block 结合使用( Bootstrap 在显示下拉菜单时使用)；

因此，您将元素设置为 visibility:hidden，然后在打开时将其切换为 visibility: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/