是否可以为flexbox的插入，移除和项目位置设置动画?

问题描述

该问题最初是在2012年问到的提供的答案没有涵盖我感兴趣的用例(包装的内容更改行的平滑移动).

This question was originally asked back in 2012 however the answers provide did not cover the use case I'm interested in (smooth movement for wrapped content changing lines).

从概念上讲，由于项目正在改变其位置，我会希望过渡会适用.

Conceptually, since the items are changing their positions, I would expect the transitions to apply.

我已在所有涉及的元素(flexbox和孩子们)

I have set the transition property on all involved elements (the flexbox and the children)

有什么方法可以使对动画的编辑(添加和删除)动画化?"

Is there any way to animate edits (adds & deletes) to a flexbox?"

我对使包装到其他行/列的flexbox项的移动动画特别感兴趣.

I'm particularly interested in animating movement of flexbox items that are wrapped to other rows/columns.

所需的最终功能将类似于metafizzy同位素中可用的.

The desired end functionality would resemble what is available in metafizzy's isotope.

推荐答案

我可以做到，这有点棘手 https://codepen.io/balvin/pen/wXGyYw

I could do it, and it's a litle trickyhttps://codepen.io/balvin/pen/wXGyYw

无需自动换行， https://codepen.io/balvin/pen/gKrXdM基本上，您需要将所有弹性项目设置为 width:0; flex-grow:1 但是当您希望将其与wrap一起使用时，它会变得有点困难，因为项目需要具有 width 才能用于包装它们，因此使用一些setTimeout我可以完成

Without wrap, it's easier https://codepen.io/balvin/pen/gKrXdMbasically yo need to set all your flex items to width:0;flex-grow:1but when you want it to work with wrap it becomes a little harder because the items need to have width in order to be avaible to wrap them, so with some setTimeout I can acomplish that

这篇关于是否可以为flexbox的插入，移除和项目位置设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！