当我关闭扩展框时,我希望其他列表项平稳过渡到其原始位置,而不是像现在这样跳动。我如何实现这一目标,我不知道如何解决这个问题。

css - 对元素进行动画重新排序-LMLPHP

编辑:Listitems是组件的数组。 Expandable可以通过OnClickEvent进行切换,该事件会更改状态中的布尔值和条件渲染引号,如下所示:

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

最佳答案

我通过对Expandable窗口的高度进行动画处理来使其按我想要的方式工作。仅供将来参考,我使用React CSSTransitionGroup来为Expandable设置动画。

结果如下:

css - 对元素进行动画重新排序-LMLPHP

仍然需要做一些微调

如果有人随意发布更好的解决方案,因为我知道您应该避免对任何属性设置动画,但是:不透明度,比例,位置和旋转

10-08 04:32