CSS3トランジションイベントjQueryを使用するリスナー

Question

アーティクル要素にCSS3トランジションエフェクトを実装していますが、イベントリスナトランジションはjQueryではなく、純粋なJavaScriptでのみ動作します。

以下の例を参照してください：

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

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

を誰かが私が間違って何をやっている私を説明できますか？

あなたが bind()または on()方法使用する必要がありますjQueryので

Answer 1

：最初のものは、実際に（それがベンダー接頭辞を必要としなければならないので、私はそれを疑う）動作する場合、これはあまりにも動作するはず

$(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オブジェクトを返します。それは

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

Answer 4

にも注意してください取る、代わりにこれを試してみてくださいプロパティ.addEventListener

を持っていないことをあなたが複数のtransitionEndコールバックを買ってあげるあなたが要素に複数のトランジションを実行している場合（例えば不透明さと幅） 。

jQueryを使用してイベントをdivの遷移先にバインドする場合は、1つの（）関数を使用することを検討してください。

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

これはコードが初めて起動することを意味します。したがって、同じ要素で4つの異なるトランジションが発生した場合、コールバックは1回だけ発生します。