我正在使用flexbox在容器中显示项目 – 当项目被删除/添加时,项目会捕捉到新的位置.无论如何都要在州之间顺利过渡?期望多行之间的过渡,并且项目可以具有可变宽度.我正在使用角度JS添加/删除项目.
我无法想出一个有效的解决方案.有任何想法吗?
最佳答案 我对angularJS了解不多,但你可以这样做:
使用过渡.要删除元素,首先要将宽度,边距等更改为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;所以添加/删除元素(即使是宽度为零的元素)也会导致元素之间的“空间”重新分配.我认为解决这个问题相当棘手.