如何实现侧边栏项目删除时剩余项同步平滑上滑填充空间？

开发侧边栏列表时，想要删除某一项时，被删项收缩消失的同时，下面的列表项能跟着一起平滑上滑填坑。现在的问题是被删项滑走后，下面的项要等它彻底删掉才会动，优化方案如下：

优化后的CSS #

.sidebar {
   width: 250px;
   background-color: #f0f0f0;
   padding: 10px;
   border-right: 1px solid #ccc;
   border-radius: 10px;
}

.item-list {
   list-style-type: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 10px; /* 用flex gap控制项间距，代替原来的item margin */
}

.item {
   background-color: #fff;
   padding: 10px;
   border: 1px solid #ccc;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: 10px;
   /* 过渡影响布局的属性，让空间收缩时有动画 */
   transition: height 0.3s ease, padding 0.3s ease, opacity 0.3s ease, border 0.3s ease;
   overflow: hidden; /* 高度缩小时不让内容跑出来 */
}

.item.deleting {
   height: 0;
   padding: 0;
   opacity: 0;
   border: none;
   margin: 0;
}

.del {
   background-color: #ff6666;
   border: none;
   color: white;
   padding: 5px 10px;
   cursor: pointer;
   border-radius: 9999px;
   transition: background-color 0.3s;
}

.del:hover {
   background-color: #ff3333;
}

优化后的JS #

document.addEventListener("DOMContentLoaded", function () {
   const deleteButtons = document.querySelectorAll(".del");

   deleteButtons.forEach((button) => {
      button.addEventListener("click", function () {
         const item = this.parentElement;
         item.classList.add("deleting");
         // 只触发一次删除，避免多个过渡属性结束时重复执行
         item.addEventListener("transitionend", function () {
            item.remove();
         }, { once: true });
      });
   });
});

核心优化思路 #

1. 改用Flex布局控间距：把.item-list改成垂直Flex布局，用gap设置项之间的距离。原来的margin没法参与过渡动画，而Flex的gap会随着子元素的布局变化自动平滑调整，下面的项就能跟着被删项的收缩同步上滑。
2. 换过渡属性：去掉不影响布局的transform，改成过渡height、padding这些直接决定元素占用空间的属性，让被删项的空间逐渐收缩至0，而不是仅仅视觉上移走。
3. 避免重复删除：给transitionend事件加{ once: true }，确保元素只被删除一次，不会因为多个属性完成过渡而重复触发remove()。

HTML部分保持原代码不变即可。

内容的提问来源于stack exchange，提问作者user25148175