使用jQuery的CSS3转换事件监听器

Question

我正在对article元素实现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将事件绑定到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");
})