React 动画重新排序项目

【问题标题】：React Animating reordering of ItemsReact 动画重新排序项目
【发布时间】：2018-06-01 12:29:18
【问题描述】：

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

编辑：Listitems 是一个组件数组。 Expandable 使用 OnClickEvent 进行切换，该事件会更改状态中的 bool 和条件渲染引用，如下所示：

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

【问题讨论】：

【解决方案1】：

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

结果如下：

不过还是需要做一些微调

如果其他人找到更好的解决方案，尽管发布它，因为我知道你应该尽量避免为任何属性设置动画，但是：不透明度、缩放、位置和旋转

【讨论】：