CSS를 사용하여 높이:0;높이:자동;을 어떻게 전환할 수 있나요?
<p>CSS 전환을 사용하여 <code></code></p><ul> <p><br /></p>
<p><code></code></p><ul> <code>높이: 0;</code>에서 시작합니다. 마우스를 올리면 높이가 <code>height:auto;</code>로 설정됩니다. 그러나 이로 인해 </em> 전환 없이 <p><br /></p>
<p><code>height: 40px;</code>에서 <code>height: auto;</code>로 이동하면 <code>height: 0;< /code> 그런 다음 갑자기 올바른 높이로 점프합니다. </p>
<p>JavaScript를 사용하지 않고 어떻게 이 작업을 수행할 수 있나요? </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#child0 {
높이: 0;
오버플로: 숨김;
배경색: #dedede;
-moz-transition: 높이 1초 용이성;
-webkit-transition: 높이 1초 용이성;
-o-전환: 높이 1초 용이성;
전환: 높이 1초 용이성;
}
#parent0:호버 #child0 {
높이: 자동;
}
#어린이40 {
높이: 40px;
오버플로: 숨김;
배경색: #dedede;
-moz-transition: 높이 1초 용이성;
-webkit-transition: 높이 1초 용이성;
-o-전환: 높이 1초 용이성;
전환: 높이 1초 용이함;
}
#parent40:호버 #child40 {
높이: 자동;
}
h1 {
글꼴 두께: 굵게;
}</pre>
<pre class="brush:html;toolbar:false;">두 CSS 조각 사이의 유일한 차이점은 하나의 높이가 0이고 다른 하나의 높이가 40이라는 것입니다.
<시간>
<div id="parent0">
<h1>Hover me (높이: 0)</h1>
<div id="child0">일부 콘텐츠
<br>일부 콘텐츠
<br>일부 콘텐츠
<br>일부 콘텐츠
<br>일부 콘텐츠
<br>일부 콘텐츠
<br>
</div>
</div>
<시간>
<div id="parent40">
<h1>Hover me (높이: 40)</h1>
<div id="child40">일부 콘텐츠
<br>일부 콘텐츠
<br>일부 콘텐츠
<br>일부 콘텐츠
<br>일부 콘텐츠
<br>일부 콘텐츠
<br>
</div>
<p><br /></p></ul></ul>
