css - 如何转换高度：0; 达到高度：自动； 使用CSS？(How can I transition height: 0; to height: auto; using CSS?)

Question

I am trying to make a <ul> slide down using CSS transitions.

(我正在尝试使用CSS过渡使<ul>滑落。)

The <ul> starts off at height: 0;

(<ul>从height: 0;)

.

(。)

On hover, the height is set to height:auto;

(悬停时，将高度设置为height:auto;)

.

(。)

However, this is causing it to simply appear, not transition,

(但是，这导致它只是显示而不是过渡，)

If I do it from height: 40px;

(如果我从height: 40px;)

to height: auto;

(达到height: auto;)

, then it will slide up to height: 0;

(，那么它将向上滑动到height: 0;)

, and then suddenly jump to the correct height.

(，然后突然跳到正确的高度。)

How else could I do this without using JavaScript?

(不使用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> 

  ask by Hailwood translate from so

Answer 1

Use max-height in the transition and not height .

(在过渡中使用max-height ，而不要使用height 。)

And set a value on max-height to something bigger than your box will ever get.

(并将max-height的值设置为比您的盒子所能达到的更大的值。)

See JSFiddle demo provided by Chris Jordan in another answer here.

(请参阅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>