Rileva quale animazione CSS è terminata in JavaScript?

Question

Come si può rilevare quale animazione CSS è appena terminata in JavaScript?

L'ultima necessità è riattivare un'animazione CSS. A causa della nostra gerarchia HTML, preferiamo non controllare la classe dell'elemento, ma agire solo quando termina una particolare animazione. Se hai un metodo che consente di riattivare un'animazione senza rimuovere/aggiungere una classe, faccelo sapere.

Altrimenti ... il nostro codice:

page.find('.button.letter').on('webkitAnimationEnd', function() { 
     $(this).removeClass('tap_animation'); 

     console.log('Hi: ' + this.style.webkitAnimationName); 

     if (!write_mode()) { 
      do_write(this); 
     } 
    }); 

this.style.webkitAnimationName restituisce sempre la stringa vuota.

Stiamo facendo qualcosa di sbagliato?

Abbiamo bisogno del codice per i browser WebKit, in particolare per Mobile Safari.

Grazie!

Answer 1

Da jQuery è possibile accedere all'oggetto originalEvent, e, da lì, la proprietà animationName:

$('body').on('webkitAnimationEnd', function(e){ 
    var animName = e.originalEvent.animationName; 
    console.log(animName); 
});​ 

(Webkit-only) JS Fiddle demo.

Da lì, è sufficiente utilizzare un if per verificare quale sia il nome dell'animazione/era (passato, suppongo, visto che è terminato).

È possibile che questo aggiornamento, che invia forse un'illustrazione migliore:

$('div').on('webkitAnimationEnd', function(e){ 
    var animName = e.originalEvent.animationName; 
    if (animName == 'bgAnim') { 
     alert('the ' + animName + ' animation has finished'); 
    } 
});​ 

(Webkit-only) JS Fiddle demo.

Questa demo utilizza il seguente codice HTML:

<div><span>text</span></div>​ 

e CSS:

@-webkit-keyframes bgAnim { 
    0%, 100% { 
     color: #000; 
     background-color: #f00; 
    } 
    50% { 
     color: #fff; 
     background-color: #0f0; 
    } 
} 

@-webkit-keyframes fontSize { 
    0%, 100% { 
     font-size: 100%; 
    } 
    50% { 
     font-size: 300%; 
    } 
} 

div { 
    font-weight: bold; 
    -webkit-animation: bgAnim; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: 2; 
} 

span { 
    font-size: 100%; 
    font-weight: bold; 
    -webkit-animation: fontSize; 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: 1; 
} 

Answer 2

Un listener di eventi per webkitAnimationEnd dovrebbe funzionare. Qualcosa sulla falsariga di:

$object.addEventListener('webkitAnimationEnd', function(){ 
     console.log('End Detected'); 
    }, false);