Хотите использовать CSS-переход, чтобы удалить дочерний элемент <li>, а также переместить следующий элемент <li>в начало списка - PullRequest
Новая
       7

Хотите использовать CSS-переход, чтобы удалить дочерний элемент <li>, а также переместить следующий элемент <li>в начало списка

0 голосов
/ 04 апреля 2019

Я пытаюсь создать приложение со списком дел, используя только Javascript (еще не изучил Jquery и т. Д.). Когда пользователь нажимает флажок, указывающий, что задача завершена, я хочу, чтобы элемент li исчезал с помощью CSS-перехода, а затем следующий элемент li переместился в начало списка. Теперь, когда я использую removeChild, CSS-переход игнорируется, но следующий элемент li без проблем переходит на верх списка. Когда я не использую removeChild и позволяю li исчезать с помощью CSS-перехода, следующий 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-код, удаляющий ребенка и следующий прыжок вверх: 

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