在React中，在擴展時動畫中心元素

Question

我正在使用React，並使用display: table和display: table-cell以及相應的居中CSS水平和垂直居中元素。

在裏面我有一些內容，當我用javascript添加內容到那個元素時，整個元素正確地重新定位，但是元素從他們的初始位置跳到他們的下一個位置。

我想動畫到位，這可能嗎？

從這個狀況：

<div table> 
    <div table-cell> 
    <div>First Content</div> 
    </div> 
</div> 

這樣：

<div table> 
    <div table-cell> 
    <div>First Content</div> 
    <div>Second Content</div> 
    </div> 
</div> 

（不包括CSS，以方便閱讀）

Answer 1

我會做到這一點通過增加具有特殊類別的新元素，例如：

<div table> 
    <div table-cell> 
    <div>First Content</div> 
    <div class="slide-in">Second Content</div> 
    </div> 
</div> 

使特殊班有max-height: 0。插入到DOM後，用一些足夠大的像素值替換最大高度以適合屏幕上的內容。確保你有一個max-height過渡。

.slide-in { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.5s; 
}