时间戳

首页 > 解决方案 > 淡出效果完成后如何运行.remove()？

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

问题描述

我想运行“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();
  });
}

标签： javascriptcallback

解决方案

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

代码示例

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>

推荐阅读