javascript - How to implement variable height animation?

Question

How to implement an animation with a variable height of p? For example, if a p is display:none, when a button is clicked, it will be displayed, and the height will gradually change from 0 to the maximum height of the p. The answer from Google is to use max-heigth. However, if the max-height setting is unreasonable (either too large or too small), the animation will be unnatural.

Answer 1

The easiest way is to use JQ’s slideUp and slideDown methods.
The following is the demo I wrote in native.
https://jsfiddle.net/11wrgm7b/