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

Question

我想删除click事件上的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

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

CSS3动画

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的转换生效.然后它会在1000ms后用你的代码删除该项目.

注意:确保CSS3转换的时间和setTimeout相同.

jQuery动画

1. 获取jQuery

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

2. 将您的Javascript第4行更改为:

   removeTarget.fadeOut(1000)
   

   • 这将淡出您的项目1000毫秒,您可以将此时间更改为您想要的任何内容.

Answer 2

2020 年，您可以放弃使用setTimeout该事件animationend，从而无需在两个地方维护持续时间：

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

Answer 3

我不久前为个人项目做了这个功能:

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