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

您无法将转换与disblay结合使用：none，display：block（在show下拉菜单中使用引导程序）;

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

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