jQueryですべてのアニメーションが終了するのを待つ方法は？

Question

私は複数のアニメーションを持っていますが、すべてのアニメーションが完了した後に私のコードを実行したいと思います。

このコードの問題は、最初のアニメーションの実行後に実行され、すべてのアニメーションが完了するのを待つことではありません。

どのような解決策ですか？

<style> 
    .userClass { 
     animation: show 7s 6s forwards,zoom 8s 6s forwards,hide 5s 13s forwards;} 


@@-webkit-keyframes show{ 
     0% { 
      opacity: 1; 
     } 

     100% { 
      opacity: 0; 
     } 
    } 
@@-webkit-keyframes zoom{ 
    // 
    } 
@@-webkit-keyframes hide{ 
    // 
    } 

</style> 


<div class="userClass" id="user"></div> 

<script> 
$(document).ready(function() { 

$("#user").bind("animationend", function() {   
      setTimeout(function() { 
      //I want to execute code here 
      }, 3000); 

     }); 
}); 
</script> 

Answer 1

"animationend"イベントは、最初に13秒後に再び1秒後に3回、4秒後（合計18秒後）に3回発生します。

varをカウントして、3番目のイベントのみを処理します。

Answer 2

animationEndが何回起きたかを記録するための変数を作成する - コードが実行されるのは3回目です。このような何か：。

$(document).ready(function() { 

    // Keep track of how many animations have ended 
    var animationEndCount = 0; 

    $("#user").bind("animationend", function() { 

    // Increment our counter 
    animationEndCount++; 

    // IF our counter is 3, run some code 
    if (animationEndCount === 3) { 
     setTimeout(function() { 

     }, 3000); 
    } 
    }); 
}); 

[CSS3トランジションが終了コールバック]の