我如何过渡高度：0; 到高度：auto; 使用CSS？

我正在尝试使用CSS过渡制作<ul>滑块。

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

如果我从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 ，您不能在高度上进行动画制作，必须设置两个明确的高度。

链接地址: http://www.djcxy.com/p/12175.html

上一篇: How can I transition height: 0; to height: auto; using CSS?

下一篇: how to change the color of the placeholder of the input in html