JavaScriptで最後に終了したCSSアニメーションを検出しますか？

Question

どのCSSアニメーションがJavaScriptで終了したかをどのように検出できますか？

究極の必要性は、CSSアニメーションを再トリガーすることです。私たちのHTML階層では、要素のクラスをチェックするのではなく、特定のアニメーションが終了したときにのみアクションを取ることを好みます。クラスを削除/追加せずにアニメーションを再トリガーする方法がある場合は、お知らせください。

そうでなければ...私たちのコード：

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は常に空の文字列を返します。

何か間違っていますか？

WebKitブラウザ、特にMobile Safariのコードが必要です。

ありがとうございます！

Answer 1

jQueryのからは、そこから、animationNameプロパティをoriginalEventオブジェクトにアクセスし、することができます。

ここから、ifを使用して、アニメーション名が何であるかを確認してください（過去の時制、私はそれが終了したと仮定します）。

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

(Webkit-only) JS Fiddle demo：

更新上記は、おそらくより良い図を得ました。

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

と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

webkitAnimationEndのイベントリスナーが機能するはずです。線に沿って何か：

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

(Webkit-only) JS Fiddle demo：

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