5

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

最終的な必要性は、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ブラウザー、特にMobileSafariのコードが必要です。

ありがとう！

4

2 に答える 2

5

originalEventjQueryからオブジェクトにアクセスでき、そこからanimationNameプロパティにアクセスできます。

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

（Webkitのみ）JSFiddleデモ。

そこから、単にifアニメーション名が何であるか/だったかを確認するために使用します（過去形、それが終了したことを考えると、私は推測します）。

上記を更新して、おそらくより良い例を示します。

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

（Webkitのみ）JSFiddleデモ。

このデモでは、次のHTMLを使用しています。

<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;
}
于 2012-09-19T16:26:02.537 に答える
0

webkitAnimationEndのイベントリスナーが機能するはずです。次のようなもの：

    $object.addEventListener('webkitAnimationEnd', function(){
        console.log( 'End Detected' );
    }, false);
于 2012-09-19T16:16:03.117 に答える