在前端开发中，我们经常需要为元素添加动画效果，以提升用户体验。而在实现动画效果时，我们经常会用到 CSS 的 transition 属性来实现简单的过渡效果。然而，当我们需要在动画结束后执行一些操作时，就需要使用到 transitionend 事件了。
什么是 transitionend 事件
transitionend 事件会在 CSS transition 结束后触发。这个事件在过渡效果完成后才会被触发，可以用来监听过渡效果的结束，并执行相应的操作。
如何使用 transitionend 事件
要使用 transitionend 事件，首先需要为元素添加 CSS transition 属性，然后通过 JavaScript 监听 transitionend 事件。
示例代码如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- -------------------- ------------ ------- ---- - ------ ------ ------- ------ ----------------- ---- ----------- ----- --- - ---------- - ------ ------ - -------- ------- ------ ---- ------------------ -------- ----- --- - ------------------------------- ------------------------------------- -- -- - ----------------------- -------- --- --------- ------- -------
在上面的示例中，当鼠标悬停在红色方块上时，宽度会从 100px 过渡到 200px，同时会触发 transitionend 事件，控制台会输出 "Transition ended"。
注意事项
- transitionend 事件在每次过渡完成时都会被触发，所以如果有多个过渡效果，可能会触发多次。
- 有些情况下，transitionend 事件可能不会被触发，比如在过渡效果被中断或者元素被隐藏时。
通过合理地运用 transitionend 事件，我们可以更好地控制动画效果的结束，从而提升用户体验。希望以上内容对你有所帮助！