如何使用 CSS 和 JavaScript 线性转换移除 DOM 元素？

对于特定的 HTML/DOM 元素，我们的工作是将其移除并为移除过程添加过渡。最终，只要点击触发器按钮，DOM 元素就会向右平移，并最终从视线和 DOM 中移除。

使用 CSS 转换元素经常让开发人员感到困惑。这个属性可以有很多变化，实际上任何 CSS 属性都可以转换，无论是不透明度还是位置。在本教程中，我们将转换文本元素的水平位置，最终将被删除。

从现在开始，要移除的 DOM 元素将被称为target 。

方法：

• 三个“h2”标签和一个按钮被包裹在一个容器部分中。第二个标签是唯一的，id 为“section”。
• 目标有一个 id（“second”）来转换运动。这是通过使用 CSS 中的 transition 属性来完成的。
• 向按钮添加一个单击事件侦听器，它向目标添加一个类（“已删除”），因此目标应该开始翻译。
• 在 CSS 中，对于带有 id (“second”) 的元素的转换设置为 transform 1s 0s 。
• 现在，设置要移除的标题的“transform”属性，等于translateX(len)，这里 len 是指元素必须被平移的长度。我们将其设置为“100vw” 。
• 最后，将事件侦听器添加到侦听 Transition-End 的目标。这将在 JavaScript 的remove()方法的帮助下移除目标。

例子：

HTML

  

    
    
  
        .removed{
            transform: translateX(100vw);
        }
  
        #second{
            transition: transform 1s 0s;
        }
  
        .cntnr{
            overflow-x: hidden;
        }
    

  

    
        Geeksforgeeks 1
        Geeksforgeeks 2
        Geeksforgeeks 3
        Remove Second
    
  
    
    
        var btn = document.querySelector("button");
        var secondText = document.querySelector("#second");
  
        btn.addEventListener("click",() => {
            secondText.classList.add("removed");
        });
  
        secondText.addEventListener("transitionend",() => {
            secondText.remove();
        })
    

  

输出：