如何使用 jQuery 检测 CSS3 转换和动画的完成？

使用 jQuery 检测 CSS3 转换和动画的完成

使用 CSS3 转换元素可提供比传统 JavaScript 技术更流畅的动画。然而，在使用 CSS3 动画时，出现了问题：如何确定过渡何时完成？

jQuery 为这种需求提供了解决方案。要监视 CSS3 过渡的结束，您可以使用以下语法绑定事件处理程序：

<code class="javascript">$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });</code>

同样，对于 CSS3 动画，您可以使用：

<code class="javascript">$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

通过提供bind() 方法中所有以浏览器为前缀的事件字符串，确保跨浏览器的兼容性。

确保处理程序的单次执行

防止重复执行处理程序，您可以使用 jQuery 的 .one() 方法。例如：

<code class="javascript">$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

.bind() 方法的弃用

jQuery 的 bind() 方法已被弃用，取而代之的是 .on()。因此，您应该使用：

<code class="javascript">$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });</code>

此方法还可以确保处理程序仅执行一次。

更多详细信息，请参阅以下参考资料：

• [jQuery .off()](https://api.jquery.com/off/)
• [jQuery .one()](https://api.jquery.com/one/)

以上是如何使用 jQuery 检测 CSS3 转换和动画的完成？的详细内容。更多信息请关注PHP中文网其他相关文章！