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

Posted 2023-03-06

【中文标题】是否可以为 flexbox 插入、删除和项目位置设置动画？

【英文标题】：Is it possible to animate flexbox inserts, removes, and item position?

【发布时间】：2015-05-03 13:41:24

【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

is it possible to animate flexbox inserts & removes?的可能重复

@BrettDeWoody OP 专门链接了这个问题并声明它可以追溯到 2012 年 ...

该问题包含解决方案（2014 年 7 月 26 日发布）。

是的，但该解决方案没有涵盖或解决我提到的用例，其中元素被包装到多行。

【参考方案1】：

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

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

【讨论】：

嗨，John，我在这里有一个类似的 CSS 过渡问题。如果您知道答案，我将不胜感激！ ***.com/q/67185337/470749

【参考方案2】：

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