CSS를 사용하여 height: 0 를 height: auto 로 전환하는 방법

질문 : 높이 전환 방법 : 0; 높이 : 자동; CSS를 사용하십니까?

---

CSS 전환을 사용하여 <ul> 슬라이드를 만들려고합니다.

<ul> 은 높이에서 시작합니다 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>

출처 : https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css