如何使用 CSS 和 JavaScript 淡化移除 DOM 元素？

CSS 拥有广阔的领域，而基本的 CSS 本质上是复制粘贴，当与 JavaScript 和相关框架等前端技术合并时，它会变得非常复杂。因此，注意到一些高技能的后端开发人员努力设计他们的投资组合网站的前端。许多与 CSS 相关联的 JavaScript 属性和属性很少被初学者使用。本文利用一个这样的属性来淡化并最终在单击按钮时删除一个段落。

HTML 代码：三个文本元素和一个移除按钮被一个容器包裹。

HTML

  

    I am confident I will not be removed!
  
  
Don't remove me I beg you
  

    I will also not be removed
  
  Remove

CSS：段落被分配了一个持续时间为一秒的不透明度过渡。此外，要添加到已删除元素的“已删除”类将最终“不透明度”指定为零。这使去除看起来褪色。

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

JavaScript：首先，我们创建按钮和段落的 DOM 对象(带有合适的标签和 id)。此外，我们将事件侦听器添加到按钮，此侦听器向段落添加了一个“已删除”类，以降低不透明度并启动淡入淡出过程。最后，我们在段落中添加一个监听器来监听转换的结束。一旦过渡完成，该段落就会被删除。

Javascript

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

最终代码：以下示例显示了上述所有代码的组合。

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

  

    
        
            I am confident I will not be removed!
        
        
            Don't remove me I beg you
        
        
            I will also not be removed
        
        Remove
    
    
        var btn = document.querySelector("button");
        var par = document.querySelector("#parId");
        btn.addEventListener("click", e => {
            par.classList.add("removed");
        });
        par.addEventListener("transitionend", () => {
            par.remove();
        })
    

  

输出：