在 React 中，在展开时为居中元素设置动画答案

【问题标题】：In React, animate a centered element upon expand在 React 中，在展开时为居中元素设置动画
【发布时间】：2017-02-13 21:18:18
【问题描述】：

我正在使用 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 以使其易于阅读）

【问题讨论】：

【解决方案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;
}

【讨论】：