我正在尝试动画化具有灵活高度的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。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句