如何在JavaScript中删除具有淡出效果的div？

我想在单击事件时删除div元素，但我想使用淡出效果删除它。我有一些JQuery解决方案，但我需要纯JavaScript或css解决方案

document.querySelector('.list').addEventListener("click", function(e){
    if (e.target.localName === "span") {
        var removeTarget = e.target.parentNode.parentNode;
        removeTarget.parentNode.removeChild(removeTarget);
    };
});

此代码正在删除div元素，但没有任何效果。如何添加淡出效果？

只需转到源代码，取出纯javascript中的

淡出

代码，然后使用它，无需重新发明轮子

或者提示使用

setTimeInterval（）

---

或者css解决方案是使用

transform

和

transition

properties

有两种方法可以实现这一点：CSS3动画或jQuery动画

CSS3动画

在CSS文档中，添加：

.list {
    opacity: 1;
    -webkit-transition: opacity 1000ms linear;
    transition: opacity 1000ms linear;
}

• 这将使您的物品的不透明度的任何更改褪色1000毫秒

将JavaScript的第4行更改为：

removeTarget.style.opacity = '0';
setTimeout(function(){removeTarget.parentNode.removeChild(removeTarget);}, 1000);

• 这将使您的项目将不透明度更改为0，从而使从步骤1的转换产生效果。然后它将在1000毫秒后删除带有代码的项目

注意：确保CSS3转换和设置超时的时间相同

jQuery动画

获取jQuery

• 转到并下载，或
• 在任何jQuery代码之前，在HTML文档中添加`

将Javascript的第4行更改为：

removeTarget.fadeOut(1000)

• 这将使您的物品淡出1000毫秒，您可以在这一次更改为您想要的任何颜色

---

这是一个好问题，但要在html中设置某个元素的动画，该元素必须在设置动画时存在。因此，您有一些方法可以做到这一点，一个好的方法是使用CSS隐藏此元素，并在动画之后删除此元素。当您可以设置动画时，您可以看到以下示例：

.隐藏{
不透明度：0；
}
.淡出{
过渡：1s线性全部；
}
这是一个列表，请单击“我”隐藏
document.querySelector（“.list”）.addEventListener（“单击”，函数（e）{
如果（e.target.localName==“span”）{
//添加CSS隐藏并使用淡出设置动画
var currentCSS=this.className；
this.className=currentCSS+'hide'；
var removeTarget=e.target.parentNode.parentNode；
setTimeout（函数（）{
removeTarget.parentNode.removeChild（removeTarget）；
},1000);
};
});

我不久前为一个个人项目创建了此功能：

function removeFadeOut( el, speed ) {
    var seconds = speed/1000;
    el.style.transition = "opacity "+seconds+"s ease";

    el.style.opacity = 0;
    setTimeout(function() {
        el.parentNode.removeChild(el);
    }, speed);
}

removeFadeOut(document.getElementById('test'), 2000);

---

使用elem.className=“my animation”将以下CSS类添加到元素中；点击：

.my-animation {
  animation: fade 3s steps(90) forwards;
 -webkit-animation: fade 3s steps(90) forwards;
  -moz-animation: fade 3s steps(90) forwards;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.0;
  }
}

---

您也可以通过修改步长（数字）来控制动画的速度。

在2020年，您可以放弃使用的use

setTimeout

，而无需在两个位置保持持续时间：

.fade-out {
  animation: fade 2s;
  -webkit-animation: fade 2s;
  -moz-animation: fade 2s;
}

/* Animate opacity */
@keyframes fade {
  from { opacity: 1 }
  to { opacity: 0 }
}
@-moz-keyframes fade {
  from { opacity: 1 }
  to { opacity: 0 }
}
@-webkit-keyframes fade {
  from { opacity: 1 }
  to { opacity: 0 }
}

const elementToFade = document.getElementById('my-element');

elementToFade.onanimationend = (e) => {
  if (e.srcElement.classList.contains('fade-out')) {
    elementToFade.parentNode.removeChild(elementToFade);
  }
};

// To fade away:
elementToFade.classList.add('fade-out');

---

jquery是纯javascript。我正在做一个小项目，我不想使用任何像jquery这样的框架。通过搜索找到了可能的重复和大量其他框架。@PariShKhAn很高兴我能提供帮助，为了表明这是有效的，供将来参考，你可以按下我文章左上角的复选标记按钮来接受它。非常实用，尽管对css的固定依赖性在以后的某个时候可能会很痛苦（仅1次向上投票：-）），简单而实用。谢谢这不会从DOM中删除元素，但这是问题中要求的。超级有用！很简单！完全通用！正是我想要的。太棒了。非常方便，适应性强。这里最好的：）