jquery - transitionstart - stop css transition

Oyente de evento de transición CSS3 con jQuery

Question

Estoy implementando un efecto de transición de CSS3 en un elemento de artículo, pero el elemento de transición de oyente de evento solo funciona en JavaScript puro, no con jQuery.

Vea el siguiente ejemplo:

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

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

¿Puede alguien explicarme qué estoy haciendo mal?

Answer 1

Si el primero realmente funciona (lo dudo porque debería requerir un prefijo de proveedor), entonces esto debería funcionar también:

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

Answer 2

en jQuery debes usar on() método bind() o on() :

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

Answer 3

this.parentNode devuelve un objeto javascript. Tiene una propiedad .addEventListener $(this).parent() devuelve un objeto jQuery. No tiene una propiedad .addEventListener

Pruebe esto en su lugar,

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

Answer 4

También tenga en cuenta que si está ejecutando múltiples transiciones en un elemento (por ejemplo, opacidad y ancho) obtendrá múltiples callbacks de transiciónEnd.

Si está utilizando jQuery para vincular un evento a un extremo de transición de un div, es posible que desee considerar el uso de la función one ().

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

Esto significa que el código solo se disparará la primera vez. Por lo tanto, si tiene cuatro transiciones diferentes en el mismo elemento, su devolución de llamada solo se activará una vez.