淡出效果完成后如何运行.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>

Answer 2

一种方法是监听事件的transitionend事件（reference）。

let el = this.parentElement;
el.addEventListener('transitionend', () => el.remove());
el.classList.add("fade-out");

这种方法相对于监听超时的吸引力在于，您不必在JavaScript中对过渡持续时间进行硬编码（如果更改了过渡时间，则必须同时更新CSS和JavaScript。）事件会在结束时触发，无论它花多长时间。