javascript - 淡出效果完成后如何运行.remove()？

Question

我想运行“this.parentElement.remove();”这一行在 "this.parentElement.classList.add("fade-out"); 行之后已完成(淡出持续 1 秒)。

现在 .remove() 立即运行，因此不会显示淡出效果。

提前谢谢了!

var deleteItem = document.querySelectorAll("span");

for (var i = 0; i < deleteItem.length; i++) {
  deleteItem[i].addEventListener("click", function(event){
    this.parentElement.classList.add("fade-out");
    this.parentElement.remove();
    event.stopPropagation();
  });
}

Answer 1

指定淡入超时函数的持续时间，完成后回调函数将执行

代码示例

const deleteItem = document.querySelectorAll("span");

const FADE_OUT_TIME = 2000;
for (let i = 0; i < deleteItem.length; i++) {
  deleteItem[i].addEventListener("click", function(event) {
    event.stopPropagation();
    this.classList.add("fade-out");
    setTimeout(_ => this.remove(), FADE_OUT_TIME)
  });
}

.cursor-pointer {
  cursor: pointer;
}

<span class="cursor-pointer">first</span>
<span class="cursor-pointer">second</span>
<span class="cursor-pointer">third</span>