您应该改用scaleY。

上一页{背景色：#eee；变换：缩放Y（0）；变换原点：顶部；转变：转变0.26s；}p： 悬停~ul{变换：缩放Y（1）；}<p>将此悬停</p>＜ul＞<li>咖啡</li><li>茶</li><li>牛奶</li></ul>

我在jsfiddle上制作了上述代码的供应商前缀版本，并将jsfiddl更改为使用scaleY而不是height。

编辑有些人不喜欢scaleY如何转换内容。如果这是一个问题，那么我建议使用剪辑。

上一页{剪辑：矩形（自动，自动，0，自动）；位置：绝对；边距：-1rem 0；衬垫：.5rem；颜色：白色；背景色：rgba（0、0、0和0.8）；过渡特性：剪辑；过渡时间：0.5s；过渡时间函数：立方贝塞尔（0.175、0.885、0.32、1.275）；}h3:悬停~ul，h3：活性~ul，ul：悬停{剪辑：矩形（自动，自动，10rem，自动）；}<h3>悬停在此处</h3>＜ul＞<li>此列表</li><li>被剪裁</li><li>剪辑过渡</li><li>将显示它</li></ul><p>一些文本。。。</p>

无硬编码值。

没有JavaScript。

无近似值。

诀窍是使用隐藏和复制的div让浏览器了解100%的含义。

每当您能够复制要设置动画的元素的DOM时，此方法都适用。

.外部{边框：红色虚线1px；位置：相对；}.虚拟{可见性：隐藏；}.真实{位置：绝对；背景：黄色；高度：0；过渡：高度0.5s；溢出：隐藏；}.outer:悬停>.real{高度：100%；}将鼠标悬停在下面的框上：<div class=“outer”><!-- 要设置动画的实际元素--><div class=“real”>不可预测的内容不可预测内容不可预知内容不可预见内容不可预料内容不可预计内容不可预期内容不可预报内容不可预言内容内容不可预测内容不可预知内容</div><!-- 要设置动画的元素的精确副本。--><div class=“dummy”aria hidden=“true”>不可预测的内容不可预测内容不可预知内容不可预见内容不可预料内容不可预计内容不可预期内容不可预报内容不可预言内容内容不可预测内容不可预知内容</div></div>

您可以从height:0转换到height:auto，前提是您还可以提供最小高度和最大高度。

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

当其中一个高度为自动时，当前无法在高度上设置动画，必须设置两个显式高度。

没有最大高度，使用相对定位，在li元素上工作，并且是纯CSS：

除了Firefox，我没有在其他任何地方进行过测试，尽管从CSS来看，它应该可以在所有浏览器上运行。

小提琴：http://jsfiddle.net/n5XfG/2596/

CSS

.wrap { overflow:hidden; }

.inner {
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }

HTML

<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

下面是我刚刚与jQuery结合使用的解决方案。这适用于以下HTML结构：

<nav id="main-nav">
    <ul>
        <li>
            <a class="main-link" href="yourlink.html">Link</a>
            <ul>
                <li><a href="yourlink.html">Sub Link</a></li>
            </ul>
        </li>
    </ul>
</nav>

以及功能：

    $('#main-nav li ul').each(function(){
        $me = $(this);

        //Count the number of li elements in this UL
        var liCount = $me.find('li').size(),
        //Multiply the liCount by the height + the margin on each li
            ulHeight = liCount * 28;

        //Store height in the data-height attribute in the UL
        $me.attr("data-height", ulHeight);
    });

然后，您可以使用click函数使用css（）设置和删除高度

$('#main-nav li a.main-link').click(function(){
    //Collapse all submenus back to 0
    $('#main-nav li ul').removeAttr('style');

    $(this).parent().addClass('current');

    //Set height on current submenu to it's height
    var $currentUl = $('li.current ul'),
        currentUlHeight = $currentUl.attr('data-height');
})

CSS:

#main-nav li ul { 
    height: 0;
    position: relative;
    overflow: hidden;
    opacity: 0; 
    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0; 
    -moz-opacity: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

#main-nav li.current ul {
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1.0; 
    -moz-opacity: 1.0;
}

.ie #main-nav li.current ul { height: auto !important }

#main-nav li { height: 25px; display: block; margin-bottom: 3px }