Слушайте Javascript несколько анимаций CSS

Question

в конце первой анимации Я добавляю новый класс с новой анимацией, как я могу прослушать вторую анимацию?

function animate() { 
     $ask.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 
      $ask.removeClass('bounceIn').wait(2000).addClass('flipOutY'); 
      //after flipOutY I want to initScene();     
     }); 
    } 

После flipOutY анимации ее закончил, я хочу стрелять initScene, как я могу слушать каждый анимации на $ спрашиваешь?

Answer 1

Вы могли бы попробовать, как так

function animate() { 
    var evtAnim = "webkitAnimationEnd oanimationend msAnimationEnd animationend"; 

    /* use on() instead of one() */ 
    $ask.on(evtAnim, function(e) { 

     /* is it the first animation? */ 
     if ($ask.hasClass('bounceIn')) { 
      $ask.removeClass('bounceIn').wait(2000).addClass('flipOutY'); 
     } 
     else { 
      /* unbind events and call initScene() */ 
      $ask.off(evtAnim); 
      initScene(); 
     } 
    }); 
} 

Answer 2

Если вы хотите выполнить какую-либо функцию после задержки, вы можете использовать $(el).trigger для имитации пользовательского события, и добавить обработчик к этому событию, как это:

$ask.one('...', function(){ 
    $ask.removeClass('bounceIn') 
     .wait(2000) 
     .addClass('flipOutY') 
     .trigger('myCustomEvent'); 
}); 

$ask.on('myCustomEvent', initScene); 
//       ^^^ 
//     call initScene() when myCustomEvent is triggered