css - Is it possible to animate Flexbox inserts & removes?

Question

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? This is actually a showstopper for me and the one missing piece with flexbox.

Answer 1

I've fixed up @skyline3000's demo based on this example from Treehouse. Not sure if this will break again if browsers change but this seems to be the intended way to animate flex size changes:

http://jsfiddle.net/2gbPg/2/

Also I used jQuery but it technically isn't required.

.flexed {
    background: grey;
    /* The border seems to cause drawing artifacts on transition. Probably a browser bug. */
    /* border: 1px solid black; */
    margin: 5px;
    height: 100px;
    flex-grow: 1;
    transition: flex-grow 1000ms linear;
}

.removed {
    /* Setting this to zero breaks the transition */
    flex-grow: 0.00001;
}

One thing to note about the CSS is you can't transition to a flex-grow of zero, it won't transition it will just disappear. You need to just put a very small value. Also there seems to be an artifacting bug when drawing borders so I've used a background in this case.