CSS 过渡不适用于高度属性

Question

我想创建一个简单的菜单与过渡。当你点击菜单项，它应该打开一个CSS过渡，但我猜我错过了什么。我的CSS类是:

.container {
    height: 0;
    overflow: hidden;
    transition: all 0.3s;
    -webkit-transition: all 0.6s;
}
.container div {
    font-size: 13px;
    padding: 5px;
}
.ShowSubMenu {
    height: initial !important;
}

ShowSubMenu仅在单击外部菜单项时应用。请在这里查看工作示例:http://jsfiddle.net/CwmTZ/

如果您将ShowSubMenu的height属性切换为一个常量，则转换将很好地工作。问题是，我不知道会有多少子菜单项，但它必须是动态的。

谢谢!

Answer 1

这个值:height: initial !important;不能用CSS动画化。您只能转换数值。

你可以这样解决:

.container {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s;
    -webkit-transition: all 0.6s;
}
.ShowSubMenu {
    background: #f00;
    max-height: 200px; /* Something bigger than menu */
    height: initial;
}

小提琴

Answer 2

我创建了一个函数来计算container元素的总高度。

js

$(function() {
    $('.Menu').on('click',function() { 
        if ($('.container').hasClass('ShowSubMenu'))
            $('.container').height(findHeight());
        else
            $('.container').height(findHeight());
    });
});
function findHeight(){
    var sumHeight = 0;
     $('.container').children().each(
         function(){
             sumHeight += $(this).outerHeight();
         });
    return sumHeight;
}

小提琴

和一个在菜单中有更多项目的例子:

小提琴