How can I transition height:0;height:auto; using CSS?
P粉461599845
P粉461599845 2023-08-27 11:59:03
0
2
466
<p>I'm trying to use CSS transitions to make <code></code></p><ul> slide down. <p><br /></p> <p><code></code></p><ul> Starts at <code>height: 0;</code>. On hover, the height is set to <code>height:auto;</code>. However, this results in it just appearing, <em> without </em> transitioning, <p><br /></p> <p>If I go from <code>height: 40px;</code> to <code>height: auto;</code> then it slides up to <code>height: 0;< ;/code> and then suddenly jump to the correct height. </p> <p>How else can I do this without using JavaScript? </p> <p><br /></p> <pre class="brush:css;toolbar:false;">#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; }</pre> <pre class="brush:html;toolbar:false;">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></pre> <p><br /></p></ul></ul>
P粉461599845
P粉461599845

reply all(2)
P粉055726146

You should use scaleY.

ul {
  background-color: #eee;
  transform: scaleY(0);    
  transform-origin: top;
  transition: transform 0.26s ease;
}
p:hover ~ ul {
  transform: scaleY(1);
}
<p>Hover This</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

I made a vendor-prefixed version of the above code on jsfiddle and changed your jsfiddle to use scaleY instead of height.

edit Some people don't like the way scaleY converts content. If this is a problem then I'd recommend using clip instead.

ul {
  clip: rect(auto, auto, 0, auto);
  position: absolute;
  margin: -1rem 0;
  padding: .5rem;

  color: white;

  background-color: rgba(0, 0, 0, 0.8);

  transition-property: clip;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover ~ ul,
h3:active ~ ul,
ul:hover {
  clip: rect(auto, auto, 10rem, auto);
}
<h3>Hover here</h3>
<ul>
  <li>This list</li>
  <li>is clipped.</li>
  <li>A clip transition</li>
  <li>will show it</li>
</ul>
<p>
  Some text...
</p>
P粉242741921

Use max-height in transitions instead of height. And set the value of max-height to something larger than your box.

See Chris Jordan's answer to here in another JSFiddle demo /stackoverflow.com/a/20226830/18706">

#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>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template