Как добавить jQuery слайд-анимацию к HTML элементам списка?

Question

Я недавно начал изучать Javascript и Jquery и создал простую страницу списка дел для обучения. Но я не могу понять, как добавить jQuery анимацию слайда к записи, когда вы добавляете ее, и анимацию затухания к записи после нажатия кнопки удаления?

https://jsfiddle.net/9w3fgv0y/

Вот часть Javascript, так как иначе мне не удастся опубликовать ссылку jsfiddle

console.log("fail õigesti ühendatud.");

function sortFunction() {
  const sortbutton = document.getElementById("sort");
  sortbutton.addEventListener("change", sortFunction);
  var selected = sortbutton.value;
  console.log(selected);
  sortList(selected);
}

function sortList(selected) {
  if (selected == "3") {
  }
}

class Entry {
  constructor(title, description, date) {
    this.title = title;
    this.description = description;
    this.date = date;
    this.done = false;
  }
}

class Todo {
  constructor() {
    this.entries = JSON.parse(window.localStorage.getItem("entries")) || [];

    document.querySelector("#addButton").addEventListener("click", () => {
      this.addEntry();
    });

    this.render();
  }

  addEntry() {
    const titleValue = document.querySelector("#title").value;
    const descriptionValue = document.querySelector("#description").value;
    const dateValue = document.querySelector("#date").value;

    console.log(titleValue, descriptionValue, dateValue);

    this.entries.push(new Entry(titleValue, descriptionValue, dateValue));

    console.log(this.entries);
    this.saveLocal();

    this.render();
  }

  render() {
    if (document.querySelector(".todo-list")) {
      document.body.removeChild(document.querySelector(".todo-list"));
    }
    const ul = document.createElement("ul");
    ul.className = "todo-list";
    this.entries.forEach((entryValue, entryIndex) => {
      const li = document.createElement("li");
      const div = document.createElement("div");
      const removeButton = document.createElement("div");
      removeButton.classList.add("delete-button");
      const removeIcon = document.createTextNode("X");
      li.classList.add("entry");

      removeButton.addEventListener("click", () => {
        ul.removeChild(li);
        this.entries.splice(entryIndex, 1);
        this.saveLocal();
        this.render();
      });

      if (entryValue.done) {
        div.classList.add("task-completed");
      }

      div.addEventListener("click", event => {
        event.target.classList.add("task-completed");
        this.entries[entryIndex].done = true;
        this.saveLocal();
      });

      div.innerHTML = `${entryValue.title} <br> ${entryValue.description} <br> ${entryValue.date}`;

      removeButton.appendChild(removeIcon);
      li.appendChild(div);
      li.appendChild(removeButton);
      ul.appendChild(li);
    });

    document.body.appendChild(ul);
  }

  saveLocal() {
    window.localStorage.setItem("entries", JSON.stringify(this.entries));
    console.log("save");
  }
}

const todo = new Todo();