React动画重新排序项目

Question

当我关闭那个扩展框时，我希望其他列表项顺利过渡到原来的位置，而不是像现在这样跳转。我怎么能实现这一点，我不知道如何解决这个问题。

编辑：Listitems是一个组件数组。使用OnClickEvent切换Expandable，它会更改状态中的bool和条件呈现引号，如下所示：

{this.state.expanded && <div> Expandable </div>

Answer 1

通过设置Expandable窗口的高度动画，我按照我想要的方式工作。仅供将来参考，我使用React CSSTransitionGroup来动画化Expandable。

结果如下：

仍然需要做一些微调

如果其他人找到了更好的解决方案，但随意发布，因为我了解到你应该尽量避免动画任何属性，但是：不透明度，比例，位置和旋转