Css 删除列表项时列表项的滑动转换

自从我上次使用CSS已经有一段时间了。这个我有点麻烦。我有一份物品清单。当我单击十字时，它会从DOM中删除该项。然而，我想要的是当一个项目被移除时，让其余的项目向上滑动

目前，它只是根据需要删除项目，但会立即移动另一个项目以“填充空间”。我知道有一种方法可以使用CSS转换，但问题是如何

var remove=函数（id）{
document.querySelector（'#'+id）.remove（）；
}

div{
边框：1px纯灰；
宽度：100px；
保证金：自动；
边缘底部：10px；
文本对齐：居中；
填充：10px
}
跨度{
浮动：对；
光标：指针；
}

One×
二×
三×
像这样的四个×

我添加了一个名为

closeSlide

的类，它将设置元素向上滑动的动画。在转换之后，通过设置计时器将其删除

为了美观起见，我在目标样式中添加了

overflow:hidden

，也可以通过JS使用

elem.style.overflow='hidden'

添加。但是为了对正，我将其添加到目标样式中，因为我希望在启动结束动画时避免任何可能的抖动

var remove=函数（id）{
var elem=document.querySelector（“#”+id）；
elem.className+='closeSlide'；
setTimeout（函数（）{
elem.remove（）；
}, 200);
}

div{
边框：1px纯灰；
宽度：100px；
保证金：自动；
边缘底部：10px；
文本对齐：居中；
填充：10px；
溢出：隐藏；
}
跨度{
浮动：对；
光标：指针；
}
.closeSlide{
页边距底部：0；
高度：0px；
填充顶部：0；
填充底部：0；
过渡：0.2秒，全部缓解；
/*只需反转您应用的任何间距样式，使其**神奇地**消失*/
}

One×
二×
三×
四×

我认为你必须使用动画而不是过渡谢谢Daniel，它看起来不错，但有没有办法只在css属性应用于所有项目时（如过渡：线性？）才能做到这一点。@Ivan，我不太明白你的意思：/如果你删除其他属性，动画将不会看起来那么平滑，你可以试着摆弄一下这些属性，自己看看。