Is it possible to animate position of flex items when items are removed/added?

Question

I'm using flexbox to display items in a container- the items snap to their new positions when items are removed/added. Is there anyway to smoothly transition between the states? Transitions between multiple lines is desired and items can be of variable width. I'm using angular JS to add/remove items.

I haven't been able to come up with a working solution. Any ideas?

Plunker here.

Answer 1

I don't know much about angularJS, but you could do this:

http://jsfiddle.net/H9mvd/5/

using transitions. To remove an element, first you'd change the width, margins etc. to 0, and then remove the item on the 'transitionEnd' event:

$(this).css({
    'margin-left': '0',
    'margin-right': '0',
    width: '0'
}).on('transitionend', function(){
    $(this).remove();
});

And for adding elements, insert the new element with the style attribute such that width, margins etc. are 0. Then remove these from style so that the element gets transitioned to it's proper size:

container.append('<div style="margin-left:0;margin-right:0;width:0;"></div>');

setTimeout(function(){
    // needs placing in a timeout so that
    // the CSS change will actually transition
    // (CSS changes made right after inserting an
    // element into the DOM won't get transitioned)

    container.children().last().css({
        'margin-left': '',
        'margin-right': '',
        width: ''
    });
},0);

There are 'jumps' in position when adding/removing elements because the flexbox is set with justify-content: space-around;, so adding/removing an element (even one with zero width) will cause the 'space' between elements to be redistributed. I think it'd be fairly tricky to work around this.

Answer 2

yes, it is, test & try it using animation CSS : http://plnkr.co/edit/VnFTz5VKDJIjFIJ6YBwG?p=preview

div.ng-scope {max-width:15em;overflow:hidden;animation:deploy 2s;}
@keyframes deploy {
  from {
    max-width:0;
  }
  to {
    max-width:15em;
  }
}