css - React 动画重新排序元素

Question

当我关闭那个扩展框时，我希望其他列表项能够平滑地过渡回它们的原始位置，而不是像现在这样跳跃。我怎样才能做到这一点，我不知道如何解决这个问题。

编辑:Listitems 是一组组件。 Expandable 与 OnClickEvent 切换，这会更改状态中的 bool 和条件渲染引用，如下所示:

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

Answer 1

通过设置可扩展窗口的高度动画，我让它按照我想要的方式工作。仅供将来引用，我使用 React CSSTransitionGroup 为 Expandable 设置动画。

结果如下:

不过还是需要做一些微调

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