javascript - 가변 높이 애니메이션을 구현하는 방법은 무엇입니까?

Question

p의 가변 높이로 애니메이션을 구현하는 방법은 무엇입니까? 예를 들어 p에 display: none이 있는 경우 버튼을 클릭하면 해당 내용이 표시되고 높이는 0에서 p의 최대 높이로 점차 변경됩니다. . Google의 답변은 max-heigth를 사용하는 것입니다. 그러나 max-height 설정이 무리한 경우(너무 크거나 너무 작은 경우) 애니메이션이 부자연스럽습니다.

Answer 1

가장 쉬운 방법은 JQ의 SlideUp, SlideDown 메소드를 사용하는 것입니다.
다음은 제가 네이티브로 작성한 데모입니다.
https://jsfiddle.net/11wrgm7b/