CSS3转换事件监听器与jQuery

我正在实现文章元素的CSS3过渡效果，但事件监听器transitionend只适用于纯JavaScript，而不适用于jQuery。CSS3转换事件监听器与jQuery

见下面的例子：

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

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

有人可以解释我什么我做错了吗？

来源

2012-07-01 Tudor Ravoiu

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

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

来源

2012-07-01 17:32:36 undefined

要获得完整的兼容性，您还应该包含供应商前缀事件。参见http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end](http://blog.teamtreehouse.com/using-jquery-to-detect -when-css3-animations-and-transitions-end）以获取详细信息。 –

如果第一个真正的作品（我怀疑它，因为它应该要求供应商名称），那么这应该工作太：

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

来源

2012-07-01 17:32:41 Esailija

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

试试这个，

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

来源

2012-07-01 18:05:28 Jashwant

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

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

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

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

来源

2012-07-04 22:35:59 graygilmore

它是'one'还是'on'？ – fboes

使用'one（）'确保您只捕获一个事件。 – graygilmore

你最好检查一下e.currentTarget是否是正确的元素，因为'transitionend'也会触发其子对象的任何动画。 – venimus

CSS3转换事件监听器与jQuery

回答

相关问题