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

Posted 2023-03-05

【中文标题】如何在 JavaScript 中删除具有淡出效果的 div？

【英文标题】：How to remove a div with fade out effect in JavaScript?

【发布时间】：2016-01-30 04:18:32

【问题描述】：

我想在点击事件中删除一个 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 元素，但没有任何效果。如何添加淡出效果？

【问题讨论】：

jquery 是纯 javascript。

我正在做一个小项目，我不想使用 JQuery 之类的任何框架。

Javascript fade in fade out without Jquery and CSS3 和通过搜索 SO 找到的许多其他人的可能重复项。

【参考方案1】：

直接去jQuery源代码，把纯javascript的fade代码取出来使用，不用重新发明***，

或者提示是使用setTimeInterval()将div的高度慢慢降低到0

或者 css 解决方案是使用 transform 和 transition 属性

【参考方案2】：

有两种方法可以实现：CSS3 动画或 jQuery 动画。

CSS3 动画

在您的 CSS 文档中，添加：

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

这将使您的项目不透明度的任何更改淡出 1000 毫秒。

将 JavaScript 的第 4 行更改为：

removeTarget.style.opacity = '0';
setTimeout(() => removeTarget.remove(), 1000);

这将使您的项目不透明度更改为 0，从而使从第 1 步的过渡产生效果。然后它将在 1000 毫秒后使用您的代码删除该项目。

注意：确保 CSS3 过渡的时间和 setTimeout 相同。

jQuery 动画

获取 jQuery

转到jQuery Website 并下载它，或者 在您的 html 文档中，在任何 jQuery 代码之前添加 `。

将 Javascript 的第 4 行更改为：

removeTarget.fadeOut(1000)

这将使您的项目淡出 1000 毫秒，您可以将此时间更改为您想要的任何时间。

【讨论】：

@PariShKhAn 很高兴我能提供帮助，以标记此方法有效，为了将来参考，您可以按我帖子左上角的复选标记按钮接受它。

非常实用，尽管对 css 的固定依赖在以后的某个时候可能会很痛苦（仅 1 次支持 :-)）

2022 年更新：现在您可以使用removeTarget.remove();。无需访问父级和删除子级。 :-)

@vee 我希望我在几个月前就意识到这是一个功能！我刚刚更新了我的答案以使用这个

【参考方案3】：

这是一个很好的问题，但是要为 html 中的某些元素设置动画，该元素必须在动画时存在。所以，你有一些方法可以做到这一点，一个好的方法是用 CSS 隐藏这个元素，然后在动画之后删除这个元素。当你隐藏你可以动画时，你可以看到这个例子：

<style>
  .hide
    opacity: 0; 
   
  .fade-out 
    transition:1s linear all;
  
</style>
<span class="list fade-out">

  This is a List, click me to hide

</span>

<script>
  document.querySelector('.list').addEventListener("click", function(e) 
    
    if (e.target.localName === "span") 
      
      //Add CSS hide and animate with fade out
      var currentCSS = this.className;
      this.className = currentCSS + ' hide';
      
      var removeTarget = e.target.parentNode.parentNode;
      setTimeout(function()
        removeTarget.parentNode.removeChild(removeTarget);
        ,1000);
    ;
  );
</script>

【参考方案4】：

我不久前为个人项目制作了此功能：

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);

【讨论】：

超级好用！很容易 ！完全通用！正是我想要的。

太棒了。非常方便且适应性强。

这里最好的一个:)

很好的解决方案！顺便说一句，您实际上不需要计算可以在转换中使用ms 的秒数。

@pheianox 虽然您对答案的编辑提高了代码的清晰度和简洁性，但最好使用leave a comment 而不是更改答案（顺便说一句：请参阅 ms 1000 中的问题，函数-call in answer 在 ms 2000.

【参考方案5】：

使用 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;
  

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

【讨论】：

简单实用。谢谢

这不会从 DOM 中删除元素，但问题中要求这样做。

【参考方案6】：

2020年你可以放弃使用setTimeout换成the animationend event，不再需要维护两个地方的duration：

.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');