在前端开发中，经常需要使用 CSS3 过渡来实现动画效果。当这些过渡完成后，我们可能需要执行一些回调函数。本文将探讨如何在 CSS3 过渡完成后执行回调，并提供示例代码和指导意义。
CSS3 过渡的基础知识
CSS3 过渡是指从一个 CSS 属性值平滑地过渡到另一个 CSS 属性值的过程。在 CSS3 中，可以使用 transition 属性来定义过渡效果。例如，下面的 CSS 代码定义了一个宽度从 100px 到 200px 的过渡效果：
.box {
width: 100px;
transition: width 1s;
}
.box:hover {
width: 200px;
}当鼠标悬停在 .box 元素上时，宽度会从 100px 平滑过渡到 200px，持续时间为 1 秒。
在 CSS3 过渡完成后执行回调
当 CSS3 过渡完成后，可能需要执行一些回调函数。例如，可能需要更新页面内容或者触发其他动画效果。
在 JavaScript 中，可以通过监听 transitionend 事件来检测 CSS3 过渡是否完成。例如，下面的 JavaScript 代码监听了 .box 元素的宽度过渡完成事件：
const box = document.querySelector('.box');
box.addEventListener('transitionend', () => {
console.log('Transition completed!');
});当 .box 元素的宽度过渡完成后，会输出 'Transition completed!'。
示例代码
下面是一个完整的示例代码，展示了如何使用 CSS3 过渡和 JavaScript 回调函数来实现动画效果：
-- -------------------- ---- -------
--------- -----
------
------
-------
---- -
------ ------
------- ------
------- ---- -----
----------------- ----
----------- ----- --- --------- ---
-
------------ -
------ ------
---------- ------------------
-
--------
-------
------
---- ------------------
------- ---------------------------------------
--------
----- --- - -------------------------------
-------- ------------ -
------------------------------------- -- -- -
----------------------- -------------
-- - ----- ---- ---
-----------------------------
-
---------
-------
-------这个示例代码定义了一个红色的正方形，当点击按钮时，正方形会平滑地从左侧移动到右侧并放大。当过渡完成后，会在控制台输出 'Transition completed!'。
指导意义
本文介绍了如何在 CSS3 过渡完成后执行回调函数。这对于实现复杂的动画效果非常有用。同时，还需要注意以下几点：
- 需要在过渡开始之前添加事件监听器，否则可能会错过事件。
- 可以使用
{ once: true }选项来确保回调只被执行一次。 - 在一些老版本的浏览器中，可能需要使用
-webkit-transitionend事件来代替 transitionend 事件。
希望本文能对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9306
