在前端开发中，我们经常使用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