Событие перехода перехода CSS3 с 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 вы должны использовать bind() или on() метод:

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

Answer 2

Если первый один действительно работает (я сомневаюсь в этом, потому что он должен требовать префикса поставщика), то это должно работать также:

$(this).parent().on('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

Также обратите внимание, что если вы используете несколько переходов на элементе (например, помутнение и ширина), что вы получите несколько обратных вызовов transitionEnd ,

Если вы используете jQuery для привязки события к концу перехода div, вам может потребоваться использовать функцию one().

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

Это означает, что код будет срабатывать только в первый раз. Итак, если у вас было четыре разных перехода, происходящих на одном и том же элементе, ваш обратный вызов будет срабатывать только один раз.