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

How to remove a div with fade out effect in JavaScript?

提问by PariSh KhAn

I want to remove a div element on click event but i want to remove it with a fade out effect. I have got some JQuery solution but i need pure JavaScript or css solution.

我想在点击事件中删除一个 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);
    };
});

This code is removing the div element with no effect. How can i add a fade out effect?

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

回答by Jaketr00

There are two ways you can achieve this: CSS3 animation or jQuery animation.

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

CSS3 Animation

CSS3 动画

1. In your CSS document, add:

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

   • This will make any change of opacity to your item fade by 1000ms.

2. Change line 4 of your JavaScript to:

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

   • This will make your item change opacity to 0, thus making the transition from step 1 have an effect. Then it will remove the item with your code after 1000ms.

1. 在您的 CSS 文档中，添加：

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

   • 这将使您的项目的任何不透明度变化淡化 1000 毫秒。

2. 将 JavaScript 的第 4 行更改为：

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

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

Note:Make sure the time of the CSS3 transition and the setTimeout are the same.

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

jQuery Animation

jQuery 动画

1. Get jQuery

   • Go to the jQuery Websiteand download it, or
   • Add ` in your HTML document before any jQuery code.

2. Change line 4 of your Javascript to:

   removeTarget.fadeOut(1000)
   

   • This will Fade Out your item by 1000ms, you can change this time to whatever you want.

1. 获取 jQuery

   • 转到jQuery 网站并下载它，或者
   • 在 HTML 文档中的任何 jQuery 代码之前添加 `。

2. 将 Javascript 的第 4 行更改为：

   removeTarget.fadeOut(1000)
   

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

回答by alvarodms

I've made this function a while ago for a personal project:

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

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

回答by vinayakj

Just goto jQuerysource code, take out the fadecode which is in pure javascript, and use it, no need to reinvent the wheel,

直接去jQuery源码，把fade纯javascript里面的代码拿出来用，不用重新造轮子，

or a hint is reduce the height of div to 0 slowly using setTimeInterval()

或者提示是使用 setTimeInterval()

or a css solution would be to use transformand transitionproperties

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

回答by Túlio Castro

It's a good question, but to animate some element in html, this element has to exist while it is animating. So, you have some ways to do this, a good way is hide this element with CSS and after the animation you remove this element. While you hiding you can animate, you can see this example:

这是一个很好的问题，但是要在 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>

回答by Anne Bione

Add the following CSS class to the element using elem.className="my-animation"; on click:

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

You may control the speed of the animation by modifying the steps(number) as well.

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

回答by LeeGee

In 2020 you can use forgo setTimeoutfor the animation end event, removing the need to maintain the duration in two places:

在 2020 年，您可以将 forgosetTimeout用于动画结束事件，从而无需在两个地方维护持续时间：

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