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

Posted 2023-03-06

【中文标题】删除/添加项目时是不是可以为弹性项目的位置设置动画？

【英文标题】：Is it possible to animate position of flex items when items are removed/added?删除/添加项目时是否可以为弹性项目的位置设置动画？

【发布时间】：2014-04-23 09:59:34

【问题描述】：

我正在使用 flexbox 来显示容器中的项目——当项目被删除/添加时，项目会捕捉到它们的新位置。无论如何，是否可以在各州之间顺利过渡？需要多行之间的过渡，并且项目可以具有可变宽度。我正在使用 Angular JS 添加/删除项目。

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

Plunker here.

【参考方案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);

添加/删除元素时会出现“跳跃”，因为弹性框设置为justify-content: space-around;，因此添加/删除元素（即使是零宽度的元素）将导致元素之间的“空间”被重新分配。我认为解决这个问题相当棘手。

【讨论】：

感谢您的回答，非常详细易懂。不幸的是，我真正感兴趣的似乎正是这个很难解决的问题。

【参考方案2】：

是的，它是， 使用动画 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;
  

【讨论】：

谢谢！这适用于添加项目，但不适用于删除或多行转换 - 添加项目时位置仍然存在跳跃（最明显的是当行中只有一个项目时）。

将其视为提示，您必须通过添加/删除类、使用 javascript 或 CSS 过渡和/或动画来制作您的场景。例如，在移除一个元素之前，给它一个反向动画。当然，justify-content 仍然很痛苦 :)