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

Question

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

Answer 1

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

或者提示是使用 setTimeInterval()

将 div 的高度慢慢降低到 0

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

Answer 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 毫秒，您可以将此时间更改为任何您想要的时间。

Answer 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>

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

Answer 5

使用elem.className="my-animation"将以下CSSclass添加到元素中；点击：

.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;
  }
}

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

Answer 6

2020 年，您可以放弃对 the animationend event 使用 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.target.classList.contains('fade-out')) {
    elementToFade.parentNode.removeChild(elementToFade);
  }
};

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

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

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

javascript

html

css

animation

fade

CSS3动画

jQuery动画