Is it possible to animate flexbox inserts, removes, and item position?

Question

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).

"When I remove an item from a flexbox, the remaining items "snap" into their new positions immediately rather than animating.

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

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?"

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

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

Answer 1

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

Without wrap, it's easier https://codepen.io/balvin/pen/gKrXdM basically yo need to set all your flex items to width:0;flex-grow:1 but 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

Answer 2

Short answer is no (or at least not yet). Flex-order is in fact animatable, because it would go one position at a time between your desired positions, in the given timeframe, but you will not get that smooth translation of elements.