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

2019年8月4日 219次阅读

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

我无法想出一个有效的解决方案.有任何想法吗？

Plunker here.

最佳答案 我对angularJS了解不多,但你可以这样做：

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

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

$(this).css({
    'margin-left': '0',
    'margin-right': '0',
    width: '0'
}).on('transitionend', function(){
    $(this).remove();
});

并且为了添加元素,使用style属性插入新元素,使得width,margin等为0.然后从样式中删除这些元素,以便元素转换为适当的大小：

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;所以添加/删除元素(即使是宽度为零的元素)也会导致元素之间的“空间”重新分配.我认为解决这个问题相当棘手.

点赞