我怎样才能过渡高度：0; 高度：自动; 用 CSS？

我试图使用 CSS 转换使<ul>向下滑动。

<ul>从height: 0;开始height: 0; 。悬停时，高度设置为height:auto; 。然而，这导致它只是出现而不是过渡，

如果我从height: 40px;做height: 40px; height: auto; ，然后它会滑到height: 0; ，然后突然跳到正确的高度。

如果不使用 JavaScript，我怎么能这样做呢？

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent40:hover #child40 {
  height: auto;
}
h1 {
  font-weight: bold;
}

The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
  <h1>Hover me (height: 0)</h1>
  <div id="child0">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (height: 40)</h1>
  <div id="child40">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>

答案

在变换中使用max-height而不是height 。并将max-height上的值设置为比您的盒子更大的值。

请参阅 Chris Jordan 在另一个答案中提供的JSFiddle 演示。

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

您应该使用 scaleY。

HTML：

<p>Here (scaleY(1))</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CSS：

ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}

我在 jsfiddle 上创建了上面代码的供应商前缀版本， http：//jsfiddle.net/dotnetCarpenter/PhyQc/9/并将你的 jsfiddle 改为使用 scaleY 而不是 height， http：//jsfiddle.net/dotnetCarpenter/ 7cnfc / 206 / 。

当其中一个高度为auto ，您无法在高度上设置动画，您必须设置两个明确的高度。