Zdarzenie przejścia CSS3 Odbiornik z jQuery

Question

Wprowadzam efekt przejścia CSS3 na elemencie artykułu, ale detektor zdarzeń transitionend działa tylko w czystym JavaScriptu, a nie w jQuery.

Zobacz poniższy przykład:

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

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

Czy ktoś mógłby wyjaśnić mi, co robię źle?

Answer 1

w jQuery należy użyć bind() lub on() metoda:

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

Answer 2

Jeśli pierwsza naprawdę działa (wątpię, bo powinno wymagać od przedrostka sprzedawcy), to powinno działać zbyt:

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

Answer 3

this.parentNode zwraca obiekt javascript. Ma właściwość .addEventListener $(this).parent() zwraca obiekt jQuery. Nie posiada właściwości .addEventListener

Spróbuj zamiast tego

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

Answer 4

wziąć również pamiętać, że jeśli używasz wielu przejścia na elemencie (np. Zmętnienie i szerokość), że dostaniesz kilka wywołania zwrotne transitionEnd .

Jeśli używasz jQuery powiązać zdarzenie do końca przejścia div jest, warto rozważyć użycie jednej funkcji().

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

Oznacza to, że kod zostanie uruchomiony dopiero za pierwszym razem. Tak więc, jeśli masz cztery różne przejścia na tym samym elemencie, twoje wywołanie zwrotne zostanie uruchomione tylko raz.