CSS3 转换事件侦听器 with jQuery

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

还要注意，如果你在一个元素上运行多个过渡（例如不透明度和宽度），你会得到多个过渡结束回调。

如果你使用 jQuery 将事件绑定到div 的转换结束，你可能需要考虑使用 one（） 函数。

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

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

Answer 2

在jQuery中，你应该使用bind()或on()方法：

$(this).parent().bind( 'transitionend', function() {alert("1"); });

Answer 3

this.parentNode返回一个JavaScript对象。它有一个属性.addEventListener $(this).parent()返回一个 jQuery 对象。它没有属性.addEventListener

试试这个，

$(this).parent().on('webkitTransitionEnd oTransitionEnd transitionend msTransitionEnd', function() {
    alert("1");
})

Answer 4

如果第一个真的有效（我对此表示怀疑，因为它应该需要供应商前缀），那么这也应该有效：

$(this).parent().on('transitionend', function() {
    alert("1");
});