css - 无法让 CSS 过渡与下拉菜单一起使用

Question

为了更好地了解我的情况，请前往这个小提琴并看看。小提琴的预览窗格显示了我正在构建的菜单的预览。

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

这是相关代码：

.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 插件，而不是Dropdowns。

Answer 3

检查此链接http://jsfiddle.net/rakesh_vadnal/7VuGY/1/

旧的 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;
}