Wykryj, która animacja CSS właśnie zakończyła się JavaScript?

Question

Jak można wykryć, która animacja CSS właśnie się zakończyła w JavaScript?

Ostateczną potrzebą jest ponowne wywołanie animacji CSS. Ze względu na naszą hierarchię HTML wolimy nie sprawdzać klasy elementu, ale podejmować działanie tylko wtedy, gdy kończy się konkretna animacja. Jeśli masz metodę, która umożliwia ponowne wyzwalanie animacji bez usuwania/dodawania zajęć, daj nam znać.

... W przeciwnym razie nasz kod:

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 zawsze zwraca pusty ciąg.

Czy robimy coś nie tak?

Potrzebujemy kodu dla przeglądarek WebKit, w szczególności Mobile Safari.

Dzięki!

Answer 1

Od jQuery można uzyskać dostęp do obiektu originalEvent, a stamtąd, właściwość animationName:

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

(Webkit-only) JS Fiddle demo.

Stamtąd po prostu użyj if, aby sprawdzić, jaka nazwa animacji jest/była (przeszłość, jak przypuszczam, zważywszy, że się skończyła).

Zaktualizowana powyżej, aby dać możliwie lepszej ilustracji:

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

(Webkit-only) JS Fiddle demo.

To demo wykorzystuje następujące HTML:

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

i 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

Powinien działać detektor zdarzeń dla webkitAnimationEnd. Coś wzdłuż linii:

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