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

📅  最后修改于: 2021-10-29 06:34:50             🧑  作者: Mango

对于特定的 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


  

    
    

  

    
        

Geeksforgeeks 1

        

Geeksforgeeks 2

        

Geeksforgeeks 3

             
               


输出: