JavaScript を使用して WebKit CSS アニメーションを再起動するにはどうすればよいですか?

JavaScript を使用して WebKit CSS アニメーションを再トリガーする方法

この質問は、JavaScript を使用して CSS アニメーションを再トリガーする問題を解決します。既存のアニメーション ルール「@-webkit-keyframes shake」は揺れ効果を定義していますが、その後 JavaScript 経由で再度有効にしようとしても失敗します。

提供されるソリューションは、「animationEnd」イベント、具体的には「webkitAnimationEnd」を利用します。 WebKit ブラウザ。このイベントがトリガーされると、アニメーションの完了が示されます。

アニメーションを再トリガーするには、イベント リスナーが「webkitAnimationEnd」イベントの要素に追加されます。このイベントを受信すると、要素の「webkitAnimationName」スタイル プロパティがクリアされ、アニメーションが効果的にリセットされます。

例 (プレーン バニラ JavaScript):

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

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // You may want to prevent default action here.
};

例(jQuery):

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // You may want to prevent default action here.
});

クロスブラウザー サポート:

クロスブラウザー サポートの場合、「css3AnimationSupport」オブジェクトを使用して CSS を検出できます。さまざまなブラウザでサポートされているトランジション、トランスフォーム、およびアニメーションのプロパティ。

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style;

    return {
        transition: (function(){
            return divStyle.MozTransition     === ''? {name: 'MozTransition'   , end: 'transitionend'} :
                (divStyle.MsTransition     === ''? {name: 'MsTransition'    , end: 'msTransitionend'} :
                (divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} :
                (divStyle.OTransition      === ''? {name: 'OTransition'     , end: 'oTransitionEnd'} :
                (divStyle.transition       === ''? {name: 'transition'      , end: 'transitionend'} :
                false))));
        })()
        // ... Other detections omitted for brevity
    };
}());

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