我试图用灵活的高度为div的扩展设置动画。动画从高度：0px到目标高度。但是，我没有目标身高。因此，我刚刚假设一个接近真实高度的高度。这给人一种非常糟糕的效果，因为我总是过高估计或低估身高。
.expandable {
background-color: red;
width: 200px;
display: flex;
flex-direction: column;
overflow: hidden;
animation-name: expand;
animation-duration: 1s;
animation-timing-function: ease-out;
}
@keyframes expand {
from {
height: 0px
}
to {
height: 100px
}
}<div class="expandable">
text
<br />text
<br/>text
<br />text
<br/>text
<br />text
<br/>text
</div>
看我的小提琴：https://jsfiddle.net/gh3y1sbf/
我希望看到的是动画对div的实际目标高度是平滑的。
任何想法如何可能？最好不要使用javascript。另外，我没有使用JQuery。