如何使用CSS和JavaScript来淡入淡出一个DOM元素的删除

在这篇文章中，我们将使用CSS和JavaScript来淡入淡出一个DOM元素的删除。

CSS有着广泛的领域，当与JavaScript和相关框架等前端技术结合时，即使基本的CSS实质上只是复制粘贴，它也可能变得非常复杂。因此，我们注意到一些高技能的后端开发者在设计他们的作品网站的前端时会遇到困难。许多与CSS相关的JavaScript属性和属性对于初学者来说很少被使用。本文章使用了其中一个属性，以在点击按钮时使段落淡出并最终删除。

方法：

HTML代码： 将三个文本元素和一个删除按钮包装在一个容器内。
CSS： 为段落分配了一个过渡 (transition)，其中opacity的持续时间为一秒。此外，将要添加到已删除元素的“removed”类别指定了最终“opacity”为零。这样看起来就像淡出。
JavaScript： 首先，我们创建按钮和段落（具有合适的标签和id）的DOM对象。然后，我们向按钮添加事件侦听器，该侦听器会向段落添加“removed”类别，从而减少不透明度并启动淡化过程。最后，我们向段落添加一个监听器，监听过渡的结束。一旦过渡完成，段落就会被删除。
示例： 下面是上述方法的实现。

<section class="container"> 
  <h1 class="notRemoved"> 
    I am confident I will not be removed! 
  </h1> 
  <p id="parId">Don't remove me I beg you</p> 
  <h1 class="notRemoved"> 
    I will also not be removed 
  </h1> 
  <button>Remove</button> 
</section>

CSS代码

#parId { 
  transition: opacity 1s; 
} 
.removed { 
  opacity: 0; 
}

Javascript代码

var btn = document.querySelector("button"); 
var par = document.querySelector("#parId"); 
btn.addEventListener("click", e => {   
  par.classList.add("removed"); 
}); 
par.addEventListener("transitionend", () =>  
{ 
  par.remove(); 
})

输出:

如何使用CSS和JavaScript来淡入淡出一个DOM元素的删除