Bootstrap CSS 过渡不起作用

Question

由于某些未知原因，当我尝试向引导下拉列表添加过渡时，它不起作用。但是，如果我通过 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 结合使用（显示下拉菜单时引导程序使用）；

因此，您将元素设置为可见性：隐藏并在打开时将其切换为可见性：可见。

.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/