删除/添加项目时是否可以为弹性项目的位置设置动画？

Question

我使用 Flexbox 来显示容器中的项目 - 当删除/添加项目时，项目会捕捉到新位置。有什么办法可以在各州之间顺利过渡吗？需要多行之间的过渡，并且项目可以具有可变宽度。我正在使用 Angular JS 添加/删除项目。

我一直无法想出一个可行的解决方案。有任何想法吗？

笨蛋在这里。

Answer 1

我对 AngularJS 不太了解，但你可以这样做：

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

使用过渡。要删除元素，首先将宽度、边距等更改为 0，然后在“transitionEnd”事件中删除该项目：

$(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;，因此添加/删除元素（即使是零宽度的元素）将导致元素之间的“空间”重新分配。我认为解决这个问题相当棘手。