JavaScript で WebKit CSS アニメーションを再トリガーするにはどうすればよいですか?

JavaScript を使用した WebKit CSS アニメーションの再トリガー

CSS では、アニメーションは @ を使用して要素に適用できる時間制限のあるシーケンスです。 -webkit-keyframes ルール。ただし、場合によっては、タイムアウトや複数のアニメーションを使用せずにアニメーションを再トリガーする必要がある場合があります。

解決策の 1 つは、アニメーションの完了時に発生する animeEnd イベントを利用することです。 WebKit ブラウザでは、このイベントは webkitAnimationEnd として知られています。イベント リスナーを要素にアタッチすると、アニメーションの終了後にアニメーションをリセットできるようになります。

イベント駆動型リセット

バニラ JavaScript の場合:

var element = document.getElementById('box');

element.addEventListener('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
}, false);

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
};

でjQuery:

var $element = $('#box').bind('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
});

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
});

クロスブラウザー互換性

クロスブラウザーのサポートには、CSS3 移行テストのようなライブラリを利用できます。アニメーションのサポートを含む、さまざまな CSS プロパティとイベントを検出するサポート オブジェクトを提供します。

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style,
        support = {
            transition: ...
            transform: ...
            animation: ...
        };
}());

このサポート オブジェクトを使用することで、ブラウザごとにアニメーション プロパティとイベントを検出でき、一貫した処理が可能になります。複数のプラットフォームにわたる CSS アニメーションの統合。

以上がJavaScript で WebKit CSS アニメーションを再トリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。