Geek Answers Handbook

Is it possible to revive the position of the elements of flexibility when removing / adding items?

I use flexbox to display items in the container - items snap to new positions when items are deleted / added. Is there anyway a smooth transition between states? Transitions between multiple lines are desirable, and the elements can have a variable width. I use angular JS to add / remove elements.

I could not find a working solution. Any ideas?

Plunker is here.

+3
source share
2 answers

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

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

. , , .. 0, "End":

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

style, , .. 0. style, :

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

/ "", flexbox justify-content: space-around;, / ( ) , "" . , .

0

, , 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;
  }
}
0

More articles:


All Articles