![到height]( "到height")
本文介绍了如何转换高度：0;到height：auto;使用CSS？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图使用CSS转换向下滑动< ul> 。
c $ c>< ul> 开始于 height：0; 。悬停时，高度设置为 height：auto; 。
如果我从 height：40px;如果是这样做的话， 到 height：auto; ，则它将滑动到 height：0; 然后突然跳到正确的高度。
我还可以不使用JavaScript吗？
div class =snippetdata-lang =jsdata-hide =falsedata-console =falsedata-babel =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;} CSS的两个片段之间的唯一区别是其高度为0，其他高度为40.< hr />< div id = parent0> < h1>悬停我（高度：0）< / h1> < div id =child0>部分内容< br />部分内容< br />部分内容< br />部分内容< br /某些内容< br /> < / div>< / div>< hr />< div id =parent40> < h1>悬停我（高度：40）< / h1> < div id =child40>部分内容< br />部分内容< br />部分内容< br />部分内容< br /某些内容< br /> < / div>< / div>
解决方案
在转换中使用 max-height ，而不是 height 。
请参阅，由Chris Jordan在另一个中提供。
#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> < - - 创建一束，或一束，李的看到的时机。 - > < li> item< / li> < li> item< / li> < li> item< / li> < li> item< / li> < li> item< / li> < / ul>< / div>
I am trying to make a <ul> slide down using CSS transitions.
The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition,
If I do it from height: 40px; to height: auto;, then it will slide up to height: 0;, and then suddenly jump to the correct height.
How else could I do this without using 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> 解决方案
Use max-height in the transformation and not height. And set a value on max-height to something bigger than your box will ever get.
See JSFiddle demo provided by Chris Jordan in another answer here.
#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>这篇关于如何转换高度：0;到height：auto;使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！