想要使用CSS过渡来删除子<li>元素，并将下一个</li> <li>元素移到列表顶部

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