是否有可能被删除/添加项目时的动画柔性物品的位置？ [英] Is it possible to animate position of flex items when items are removed/added?

问题描述

我使用Flexbox将在盛器被删除项目时，项目捕捉到他们的新位置，以显示项目/添加。反正是有状态的平稳过渡？多行希望与项目之间的转换是可变的宽度。我使用的角度JS添加/删除项目。

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这里

推荐答案

我不知道很多关于angularJS，但你可以这样做：

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

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

使用过渡。要删除一个元素，首先你会宽度改变，利润等为0，然后卸下transitionEnd'事件的项目：

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

和添加元素，插入与样式属性的新元素，这样的宽度，利润率等都是0。然后，从删除这些风格，使得元素被转移它是适当的大小：

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

，因此添加/移除元素（;空间解决办法：

有加时/删除元素，因为Flexbox的设置与证明内容'跳跃'的位置甚至一零宽度）将导致元素之间的空间，以重新分配。我觉得这是相当棘手的解决这个问题。

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.

这篇关于是否有可能被删除/添加项目时的动画柔性物品的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！