Javascript 在“反应”中，在展开时设置居中元素的动画

我使用的是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）

我会通过添加新元素和一个特殊类来实现这一点，比如：

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

---

你能在什么地方展示一下这种行为吗？

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