jquery - 带有 jQ​​uery 的 CSS3 过渡事件监听器

Question

我正在文章元素上实现 CSS3 过渡效果，但事件监听器 transitionend 仅适用于纯 JavaScript，不适用于 jQuery。

请看下面的例子:

// this works
this.parentNode.addEventListener( 'transitionend', function() {alert("1"); }, true);

// this does not work
$(this).parent().addEventListener( 'transitionend', function() {alert("1"); }, true);

谁能解释一下我做错了什么？

Answer 1

另请注意，如果您在一个元素上运行多个转换(例如不透明度和宽度)，您将获得多个 transitionEnd 回调。

如果您使用 jQuery 将事件绑定(bind)到 div 的过渡结束，您可能需要考虑使用 one() 函数。

$(this).parent().one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
    // your code when the transition has finished
});

这意味着代码只会在第一次触发。因此，如果您在同一个元素上发生了四种不同的转换，您的回调只会触发一次。