如何使用CSS和JavaScript线性地过渡删除DOM元素

对于特定的HTML/DOM元素，我们的任务是将其删除，并为删除过程添加过渡效果。最终，一旦点击触发按钮，DOM元素应该向右平移，并最终从视野和DOM中移除。

使用CSS过渡元素常常会令开发人员感到困惑。实际上，可以对该属性进行许多变化，几乎任何CSS属性都可以过渡，无论是透明度还是位置。在本教程中，我们将过渡一个文本元素的水平位置，最后将其删除。

从现在开始，要删除的DOM元素将被称为目标。

方法:

三个”h2″标签和一个按钮包含在一个容器块中。第二个标签是唯一带有id “section” 的标签。
目标具有id(“second”)以过渡动作。这是通过使用CSS中的过渡属性来实现的。
为按钮添加点击事件监听器，该监听器将类(“removed”)添加到目标，结果目标应该开始平移。
在CSS中，为具有id(“second”)的元素设置了这个过渡效果 transform 1s 0s 。
现在，将要删除的标题的”transform”属性设置为 translateX(len), 这里len表示元素需要平移的长度。我们将其设置为 “100vw” 。
最后，为目标添加了一个事件监听器，用于监听过渡结束。这将使用JavaScript的 remove() 方法来移除目标。

示例: 此示例展示了上述方法的使用。

<style> 
    .removed{ 
        transform: translateX(100vw); 
    } 
      
    #second{ 
        transition: transform 1s 0s; 
    } 
      
    .cntnr{ 
        overflow-x: hidden; 
    } 
</style> 
  
<section class="cntnr"> 
    <h2>Geeksforgeeks 1</h2> 
    <h2 id="second">Geeksforgeeks 2</h2> 
    <h2>Geeksforgeeks 3</h2> 
    <button>Remove Second</button> 
</section> 
  
<!-- Functionality with JavaScript -->
<script> 
    var btn = document.querySelector("button"); 
    var secondText = document.querySelector("#second"); 
      
    btn.addEventListener("click",() => { 
        secondText.classList.add("removed"); 
    }); 
      
    secondText.addEventListener("transitionend",() => { 
        secondText.remove(); 
    }) 
</script>

输出：

如何使用CSS和JavaScript线性地过渡删除DOM元素