javascript - Is it possible to animate position of flex items when items are removedadded? - Stack Overflow

admin管理员组

文章数量:1429983

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 e up with a working solution. Any ideas?

Plunker here.

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 e up with a working solution. Any ideas?

Plunker here.

• javascript
• css
• angularjs
• animation
• flexbox

Share Improve this question Follow edited Mar 17, 2014 at 23:11 bornytm asked Mar 17, 2014 at 23:03 bornytmbornytm 81311 gold badge1313 silver badges2929 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

http://jsfiddle/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.

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

本文标签： javascriptIs it possible to animate position of flex items when items are removedaddedStack Overflow