无法使CSS转换与下拉菜单一起使用

Question

为了更好地了解我的情况，请转到this fiddle并查看。小提琴的预览窗格显示了我正在构建的菜单的预览。

当您点击“频道”菜单时，菜单只显示没有任何过渡效果。我不知道为什么。

这是相关代码：

.dropdown-menu {
    position: absolute;
    top: 36px;
    left: 0px;
    z-index: 1000;
    display: none;
    width: 550px;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #ffffff;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
    color: #222;

    /* See? */
    -webkit-transition: height 0.35s ease;
    -moz-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 0.35s ease;
}

知道我在那里做错了什么？

Answer 1

这是因为javascript不会改变元素的高度（点击后出现的元素）。您的css仅将过渡动画应用于高度变化。

您的javascript会将您的元素display:none;更改为display:block;，这就是您没有看到来自css的任何过渡效果的原因。

Answer 2

如果不明显，我在下拉菜单中使用Twitter Bootstrap。我试图实现的过渡效果来自Collapse plugin，而不是Dropdowns。

Answer 3

点击此链接http://jsfiddle.net/rakesh_vadnal/7VuGY/1/

OLD CSS：

.dropdown-menu {
position: absolute;
top: 36px;
left: 0px;
z-index: 1000;
display: none;
width: 550px;
padding: 0;
margin: 0;
list-style: none;
background-color: #ffffff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
color: #222;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
height: 0;
}
.open  > .dropdown-menu {
display: block;
height: auto;
}

更新了CSS：

.dropdown-menu {
position: absolute;
top: 36px;
left: 0px;
z-index: 1000;

width: 550px;
padding: 0;
margin: 0;
list-style: none;
overflow:hidden;
background-color: #ffffff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
color: #222;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
height: 0;
}
.open  > .dropdown-menu {
display: block;
height:145px;
}