介绍
which-transition-end-event 是一个 npm 包，用于判断 CSS 过渡结束所需要的事件类型。在前端开发中，通常需要在 CSS 过渡完成后执行特定的操作。通过该 npm 包可以避免浏览器之间对于 transitionEnd 事件的兼容性问题。
安装
使用 npm 进行安装：
npm install which-transition-end-event --save
使用
import whichTransitionEndEvent from 'which-transition-end-event';
const element = document.querySelector('.my-element');
element.addEventListener(whichTransitionEndEvent(), function() {
console.log('CSS Transition 完成');
});在以上示例中，我们通过 whichTransitionEndEvent() 函数获取到了正确的 transitionend 事件名称，并且通过 addEventListener 方法监听该事件。在该事件触发后，会打印 "CSS Transition 完成"。
注意：在某些情况下，例如元素不可见或因其他原因导致未能正确检测过渡事件，此函数可能返回 false。
示例
以下是一个完整示例代码。在该示例中，我们创建了一个按钮，用于展示或隐藏文本内容。在显示或隐藏文本内容的过程中，我们通过 which-transition-end-event 来监听 CSS 过渡结束事件，并在结束后做出相应的行为（例如修改按钮文本）。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------------- ----------
------ ----------------
----- -
----------- ---------- ---- ---------
----------- --
-------- -----
--------- -------
-
---------- ----- -
-------- ------
----------- -------
-
--------
-------
------
------- -----------------------------------
---- -------------
--------------
---------------
---------------
------
------- ---------------------- ----------------------------------------------------------------------------------------------
------- -----------------------
----- ------------ - -----------------------------------------
----- ---- - --------------------------------
-------------------------------------- -- -- -
-----------------------------------
--------------------- - -----
------------------------------------------------ -- -- -
--------------------- - ------
---------------------- - ------------------------------------ - ------ - -------
---
---
---------
-------
-------结论
使用 npm 包 which-transition-end-event 可以避免 CSS 过渡事件在不同浏览器之间的兼容性问题。该包提供了一个便捷的方法来获取正确的过渡事件名称，可以轻松地在过渡结束时执行某些操作。通过本教程，你学习了该包的基础使用方法，并可以在自己的项目中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffde1b