在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;
}