Question

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

我无法提出有效的解决方案。有什么想法吗？

Answer 1

是的，是的，是的，测试＆amp;尝试使用动画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;
  }
}

Answer 2

我对angularJS了解不多，但你可以这样做：

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

使用过渡。要删除元素，首先要将宽度，边距等更改为0，然后删除“转换结束”上的项目＆＃39;事件：

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

有跳跃＆＃39;因为弹性箱设置为justify-content: space-around;，所以在添加/删除元素时处于适当位置，因此添加/删除元素（即使宽度为零的元素）也会导致“空格”。要重新分配的元素之间。我认为解决这个问题相当棘手。

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

2 个答案: