title: Want to use CSS transition to remove child <li> element and also move next <li> element to top of list
body: <p>I'm trying to build a to-do list app using only Javascript (have not yet learned Jquery etc). When the user clicks the checkbox indicating the task is finished, I want the li element to fade out via CSS transition and then have the next li element jump to top of the list. What's happening now is when I use removeChild the CSS transition is ignored but the next li item jumps to the top of the list no problem. When I don't use removeChild and let the li fade out via CSS transition the next li doesn't jump to the top or just gets very wonky. How do I remove the checked li element while keeping the transition and ensuring the next li smoothly goes to the top of the list? </p>
  
  <p>Here is my CSS fade effect: </p>
  
  <pre><code>.finished {
    animation-name: fadeaway; 
    animation-duration: 3s; 
    animation-fill-mode: forwards; 
  }
  @keyframes fadeaway {
    0% {
      opacity: 1; 
    }
    50% {
      opacity: 0.5; 
    }
    100% {
      opacity: 0;
    }
  }
  </code></pre>
  
  <p>Here is my JS code removingChild &amp; having next li jump to top:</p>
  
  <pre><code>ul.addEventListener('change', (e) =&gt; {
    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);
  }
  </code></pre>
  
  <p>And here is my code trying to do the same thing using the CSS transition instead of removeChild (I added a class name to the checked element to trigger the CSS)</p>
  
  <pre><code>ul.addEventListener('change', (e) =&gt; {
    let chbx = event.target; 
    let checked = chbx.checked; 
    let divcheck = chbx.parentNode;
    if (checked) {
      divcheck.className = "finished"; 
    } else {
      divcheck.className = "";
    }
  );
  (e) =&gt; {
    let chbx = event.target; 
    let checked = chbx.checked; 
    let divcheck = chbx.parentNode;
    let prevLI = divcheck.previousElementSibling;
    ul.insertBefore(divcheck, prevLI);
    }
  });
  </code></pre>