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

Question

为了更好地了解我的情况，请前往 this fiddle看一看。 fiddle 的预览 Pane 显示了我正在构建的菜单的预览。

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

这是相关代码:

.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 的任何过渡效果。