如何实现淡入/淡出添加/删除的ListItems

.list-item {
  opacity: 0;
  transition: opacity 0.5s ease;
}

// 添加ListItems
function addItem() {
  var listItem = document.createElement("li");
  listItem.textContent = "New Item";
  listItem.classList.add("list-item");
  document.getElementById("list-container").appendChild(listItem);
  // 触发浏览器重新渲染，以便应用过渡效果
  void listItem.offsetWidth;
  listItem.classList.remove("list-item");
}

// 删除ListItems
function removeItem() {
  var listContainer = document.getElementById("list-container");
  var listItems = listContainer.getElementsByClassName("list-item");
  if (listItems.length > 0) {
    var lastItem = listItems[listItems.length - 1];
    lastItem.classList.add("list-item");
    // 监听过渡结束事件，在过渡结束后删除ListItems
    lastItem.addEventListener("transitionend", function() {
      listContainer.removeChild(lastItem);
    });
  }
}