javascript - 删除/添加元素时是否可以为 flex 元素的位置设置动画？

Question

我正在使用 flexbox 来显示容器中的元素 - 当元素被删除/添加时，元素会捕捉到它们的新位置。有没有办法在状态之间顺利过渡？需要多行之间的过渡，并且元素可以具有可变宽度。我正在使用 Angular JS 添加/删除元素。

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

Plunker here.

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

对于添加元素，插入具有样式属性的新元素，使宽度、边距等为 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;，所以添加/删除一个元素(即使是零宽度的元素)将导致重新分配元素之间的“空间”。我认为解决这个问题相当棘手。