javascript - 想使用 CSS 过渡来移除孩子元素并且也移动下一个列表顶部的元素

Question

我正在尝试仅使用 Javascript 构建一个待办事项列表应用程序（尚未学习 Jquery 等）。当用户单击指示任务完成的复选框时，我希望 li 元素通过 CSS 过渡淡出，然后让下一个 li 元素跳转到列表顶部。现在发生的事情是，当我使用 removeChild 时，CSS 过渡被忽略，但下一个 li 项目跳到列表顶部没有问题。当我不使用 removeChild 并通过 CSS 转换让 li 淡出时，下一个 li 不会跳到顶部或变得非常不稳定。如何删除选中的 li 元素，同时保持过渡并确保下一个 li 顺利进入列表顶部？

这是我的 CSS 淡入淡出效果：

.finished {
  animation-name: fadeaway; 
  animation-duration: 3s; 
  animation-fill-mode: forwards; 
}
@keyframes fadeaway {
  0% {
    opacity: 1; 
  }
  50% {
    opacity: 0.5; 
  }
  100% {
    opacity: 0;
  }
}

这是我的 JS 代码 removeChild 并让下一个 li 跳转到顶部：

ul.addEventListener('change', (e) => {
  let chbx = event.target; 
  let checked = chbx.checked; 
  let divcheck = chbx.parentNode;
  if (checked) {
    divcheck.className = "finished"; 
  } 
  ul.removeChild(divcheck);
});

ul.addEventListener('change', moveup);

function moveup() {
  let divcheckjr = document.querySelector(".finished");
  let prevLIjr = divcheckjr.previousElement;
  ul.insertBefore(divcheckjr, prevLIjr);
}

这是我的代码尝试使用 CSS 转换而不是 removeChild 来做同样的事情（我向选中的元素添加了一个类名以触发 CSS）

ul.addEventListener('change', (e) => {
  let chbx = event.target; 
  let checked = chbx.checked; 
  let divcheck = chbx.parentNode;
  if (checked) {
    divcheck.className = "finished"; 
  } else {
    divcheck.className = "";
  }
);
(e) => {
  let chbx = event.target; 
  let checked = chbx.checked; 
  let divcheck = chbx.parentNode;
  let prevLI = divcheck.previousElementSibling;
  ul.insertBefore(divcheck, prevLI);
  }
});

标签： javascriptcss-transitionsremovechild