Is it possible to animate Flexbox inserts & removes?

Question

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.

Leave a Comment Cancel reply