展開展示div：flex

Question

我正在嘗試使靈活高度的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。

Answer 1

看到這個：

How can I transition height: 0; to height: auto; using CSS?

動畫最大高度，而不是身高！