是否可以为 flexbox 插入、删除和项目位置设置动画？

Question

This question was originally asked back in 2012 但是提供的答案并未涵盖我感兴趣的用例（包装内容更改行的平滑移动）。

"当我从弹性框中删除一个项目时，剩余的项目会“对齐”到 他们的新位置立即而不是动画。

从概念上讲，由于项目正在改变它们的位置，我会 期望过渡适用。

我已经在所有涉及的元素上设置了过渡属性（ flexbox 和孩子们）

有什么方法可以对弹性框的编辑（添加和删除）进行动画处理？"

我对包装到其他行/列的 flexbox 项目的动画运动特别感兴趣。

所需的最终功能类似于可用的 in metafizzy's isotope.

Answer 1

我能做到，但有点棘手 https://codepen.io/balvin/pen/wXGyYw

不用换行更方便https://codepen.io/balvin/pen/gKrXdM 基本上你需要将你所有的弹性项目设置为width:0;flex-grow:1 但是当你希望它与 wrap 一起工作时，它会变得有点困难，因为这些项目需要有 width 才能包装它们，所以通过一些 setTimeout 我可以完成它

Answer 2

简短的回答是否定的（或至少现在还没有）。 Flex-order 实际上是可动画的，因为它会在给定的时间范围内在您想要的位置之间一次移动一个位置，但您不会获得元素的平滑转换。