transitionend event fires twice

阅读时长 4 分钟读完

在前端开发中,我们经常使用CSS来实现过渡和动画效果。而在使用CSS过渡时,我们通常需要监听transitionend事件来处理过渡结束后的行为,比如移除类名或者执行其他JavaScript代码。但是,在某些情况下,你会发现transitionend事件会触发两次,这可能会导致你的代码出错或者产生不必要的行为。

问题原因

transitionend事件会在CSS过渡完成时触发一次。然而,在某些情况下,例如在使用transform属性时,浏览器会将transform属性分解为多个子属性进行处理,从而导致transitionend事件触发多次。具体来说,当transform属性包含多个变换函数时,每个函数都会被视为一个独立的子属性,从而导致transitionend事件被触发多次。

以下是一个示例代码,它将在元素上应用一个旋转和平移变换,并在过渡结束时显示一个警告框。在该示例中,transitionend事件会触发两次:

-- -------------------- ---- -------
--------- -----
------
------
--------
    ---- -
      ------ ------
      ------- ------
      ----------------- ----
      ----------- --------- ---
    -
  --------
-------
------
----- ------------------
---------
------- --- - -------------------------------
--------------------------------------- -- -- -
-------------------- ---------
-----
--------------------- - --------------- -------------------
----------
-------
-------

解决方案

要解决transitionend事件多次触发的问题,我们可以使用以下两种方法:

方法一:移除过渡属性

在完成过渡后,我们可以将元素的过渡属性设置为none,从而避免transitionend事件再次触发。以下是修改后的示例代码:

-- -------------------- ---- -------
--------- -----
------
------
--------
    ---- -
      ------ ------
      ------- ------
      ----------------- ----
      ----------- --------- ---
    -
  --------
-------
------
----- ------------------
---------
------- --- - -------------------------------
--------------------------------------- -- -- -
-------------------- ---------
----------------------- - -------
-----
--------------------- - --------------- -------------------
----------
-------
-------

方法二:监听所有子属性的事件

另一种解决方案是监听所有子属性的transitionend事件,然后在所有事件完成后再执行所需的行为。以下是修改后的示例代码:

-- -------------------- ---- -------
--------- -----
------
------
--------
    ---- -
      ------ ------
      ------- ------
      ----------------- ----
      ----------- --------- ---
    -
  --------
-------
------
----- ------------------
---------
------- --- - -------------------------------
----- ------- - --
--------------------------------------- -- -- -
-------------
----- -------- --- -- -
--------------------- ---------
----
-----
--------------------- - --------------- -------------------
----------
-------
-------

在这个示例中,我们使用了一个计数器来跟踪transitionend事件的触发次数。当计数器达到2时,我们才执行所需的行为。

指导意义

遇到transitionend事件多次触发的问题时,我们可以使用上述两种方法来解决。此外,还有一些其他的调试技巧可以帮助我们找出问题所在,比如打印事件对象或使用浏览器

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/30985

纠错
反馈