使用jQuery添加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);

有人能解释一下我做错了什么吗？

- Tudor Ravoiu

Answer 1

注意，如果您在元素上运行多个过渡（例如透明度和宽度），则会得到多个transitionEnd回调。

如果您正在使用jQuery绑定事件到div的过渡结束，请考虑使用one()函数。

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

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

- graygilmore

---

使用 one() 可以确保您只捕获一个事件。 - graygilmore

你最好检查一下e.currentTarget是否是正确的元素，因为transitionend事件也会在其子元素动画完成时触发父元素。 - venimus

Answer 2

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

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

- Ram

---

为了完全兼容，您应该包括厂商前缀事件。有关详细信息，请参见http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end。 - Brandon Belvin

Answer 3

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

可以尝试使用以下代码：

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

- Jashwant

Answer 4

如果第一个确实有效（我怀疑，因为它应该需要供应商前缀），那么这个也应该有效：

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

- Esailija