CSS 전환 효과가 작동하지 않습니다

불행하게도 "auto"차원에서 애니메이션을 만들 수 없습니다. 애니메이션을 적용하려면 높이를 사용해야합니다. 해결책은 다음과 같습니다.

p {
  height: 30px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
p.uncollapsed {
  height: 80px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

height: auto 로 전환 할 수 없습니다 가장 멋진 트릭 중 하나는 max-height 를 애니메이션하는 것입니다.   height: auto 의 동일한 효과를 얻기 위해 .

그런 것 :

var button = document.getElementById("button");
button.onclick = function() {
  var text = document.getElementById("text");
  text.classList.add("uncollapsed");
};

p {
  max-height: 30px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
p.uncollapsed {
  max-height: 100px;
}

<p id="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem obcaecati tenetur voluptates asperiores vero necessitatibus incidunt magni beatae debitis. Libero error, ab. Debitis odit, nulla blanditiis obcaecati assumenda eveniet. Nesciunt. Lorem
  ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero provident beatae qui minima iusto, corrupti quidem nam iste alias dicta? Cupiditate quidem neque dolores distinctio quam commodi inventore provident.
</p>
<button id="button">button</button>

height: auto 때문에 작동하지 않습니다 . 이것을 시도하십시오 :

p {
   height: 30px;
   overflow: hidden;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}
p.uncollapsed {
  height: 100px;
}