代码之家 › 专栏 › 技术社区 › goalTosin

当一个项目被删除时,我如何设置侧边栏项目向上滑动的动画?

css-animations css html javascript

goalTosin · 技术社区 · 1 年前

我正在尝试创建一个带有项目列表的侧边栏。当一个项目被删除时,我希望剩下的项目能平滑地向上滑动,以填充被删除项目留下的空间。我怎样才能做到这一点?

这是我的代码:

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

.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;
}

.item {
   background-color: #fff;
   margin: 5px 0;
   padding: 10px;
   border: 1px solid #ccc;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: 10px;
   transition: transform 0.3s ease, opacity 0.3s ease;
}

.item.deleting {
   transform: translateY(-100%);
   opacity: 0;
   border: none;
}

.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;
}

<div class="sidebar">
   <ul class="item-list">
      <li class="item">item 1 <button class="del">Delete</button></li>
      <li class="item">item 2 <button class="del">Delete</button></li>
      <li class="item">item 3 <button class="del">Delete</button></li>
      <li class="item">item 4 <button class="del">Delete</button></li>
      <li class="item">item 5 <button class="del">Delete</button></li>
      <li class="item">item 6 <button class="del">Delete</button></li>
      <li class="item">item 7 <button class="del">Delete</button></li>
      <li class="item">item 8 <button class="del">Delete</button></li>
      <li class="item">item 9 <button class="del">Delete</button></li>
      <li class="item">item 10 <button class="del">Delete</button></li>
   </ul>
</div>

当正在删除的项目向上移动时,其他项目不会立即移动以填充其空间,直到该项目被删除。如何确保其他项目向上移动以填满其空间虽然项目正在向上移动?

1 回复 | 直到 1 年前

C3roe 1 年前

transform: translateY 保留元素通常占用的空间,因此如果您想使用那个 ,您必须同时将其应用于以下所有项目。

如果您操作项目的 margin-top 相反只有你不能使用 -100% 那么(因为以百分比为单位的利润率相对于宽度元素的高度)-但您可以根据项目的高度轻松地动态设置边距。

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

   deleteButtons.forEach((button) => {
      button.addEventListener("click", function () {
         const item = this.parentElement;
         item.classList.add("deleting");
         /* set negative margin-top dynamically,
            corresponding to item height */
         item.style.marginTop = "-" + item.offsetHeight + "px";
         item.addEventListener("transitionend", function () {
            item.remove();
         });
      });
   });
});

.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;
}

.item {
   background-color: #fff;
   margin: 5px 0;
   padding: 10px;
   border: 1px solid #ccc;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: 10px;
   /* transition margin instead of translate */
   transition: margin 0.3s ease, opacity 0.3s ease;
}

.item.deleting {
   /* removed translate here; */
   opacity: 0;
   border: none;
}

.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;
}

<div class="sidebar">
   <ul class="item-list">
      <li class="item">item 1 <button class="del">Delete</button></li>
      <li class="item">item 2 <button class="del">Delete</button></li>
      <li class="item">item 3 <button class="del">Delete</button></li>
      <li class="item">item 4 <button class="del">Delete</button></li>
      <li class="item">item 5 <button class="del">Delete</button></li>
      <li class="item">item 6 <button class="del">Delete</button></li>
      <li class="item">item 7 <button class="del">Delete</button></li>
      <li class="item">item 8 <button class="del">Delete</button></li>
      <li class="item">item 9 <button class="del">Delete</button></li>
      <li class="item">item 10 <button class="del">Delete</button></li>
   </ul>
</div>