淡出效果完成后如何运行.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事件（ 参考）。

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

与监听超时相比，这种方法的吸引力意味着您不必在 JavaScript 中硬编码转换持续时间（如果您更改它，则必须同时更新 CSS 和 JavaScript。）事件将每当它结束时就开火，无论需要多长时间。

Answer 3

假设.fade-out触发动画，您可以向元素添加一个animationend来实现这一点...回调在任何动画结束后调用

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

for (var i = 0; i < deleteItem.length; i++) {
    deleteItem[i].addEventListener("click", function(event) {
        this.parentElement.addEventListener("animationend", function() {
            this.parentElement.remove();
        });

        this.parentElement.classList.add("fade-out");
        event.stopPropagation();
    });
}