jQuery 带有 jQuery 的 CSS3 转换事件侦听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11284194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transition event Listener with jQuery
提问by Tudor Ravoiu
I am implementing a CSS3 transition effect on a article element but the event listener transitionendworks only in pure JavaScript, not with jQuery.
我正在文章元素上实现 CSS3 过渡效果，但事件侦听器transitionend仅适用于纯 JavaScript，而不适用于 jQuery。
See example below:
请参阅下面的示例：
// this works
this.parentNode.addEventListener( 'transitionend', function() {alert("1"); }, true);
// this does not work
$(this).parent().addEventListener( 'transitionend', function() {alert("1"); }, true);
Can somebody explain me what am I doing wrong?
有人可以解释一下我做错了什么吗？
回答by graygilmore
Also take note that if you are running multiple transitions on an element (eg. opacity and width) that you'll get multiple transitionEnd callbacks.
另请注意，如果您在元素上运行多个过渡（例如不透明度和宽度），您将获得多个 transitionEnd 回调。
If you're using jQuery to bind an event to a div's transition end, you might want to consider using one() function.
如果您使用 jQuery 将事件绑定到 div 的转换结束，您可能需要考虑使用 one() 函数。
$(this).parent().one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
// your code when the transition has finished
});
This means that the code will only fire the first time. So, if you had four different transitions happening on the same element, your callback will only fire once.
这意味着代码只会在第一次触发。所以，如果你在同一个元素上发生了四个不同的转换，你的回调只会触发一次。
回答by undefined
in jQuery you should use bind()or on()method:
在 jQuery 中你应该使用bind()oron()方法：
$(this).parent().bind( 'transitionend', function() {alert("1"); });
回答by Jashwant
this.parentNodereturns a javascript object. It has a property .addEventListener$(this).parent()returns a jQuery object. It does not have a property .addEventListener
this.parentNode返回一个 javascript 对象。它有一个属性.addEventListener$(this).parent()返回一个 jQuery 对象。它没有属性.addEventListener
Try this instead,
试试这个，
$(this).parent().on('webkitTransitionEnd oTransitionEnd transitionend msTransitionEnd', function() {
alert("1");
})
回答by Esailija
If the first one really works (I doubt it because it should require a vendor prefix), then this should work too:
如果第一个真的有效（我怀疑它，因为它应该需要供应商前缀），那么这也应该有效：
$(this).parent().on('transitionend', function() {
alert("1");
});
