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

WebKit CSS アニメーションを命令的に再トリガーする

WebKit CSS アニメーションを操作する場合、アニメーションを複数回再トリガーしようとすると制限が発生する可能性があります。この記事では、このようなシナリオに対処し、タイムアウトや追加のアニメーションに頼ることなく、JavaScript を介して CSS アニメーションを再開始するためのソリューションを提供します。

これを実現するために、WebKit ブラウザは「webkitAnimationEnd」イベントを利用します。このイベントは、アニメーションの完了時にトリガーされます。アニメーションサイクル。このイベントを利用することで、プログラムでアニメーションをリセットして再起動することが可能になります。

バニラ JavaScript の実装

純粋な JavaScript では、このアプローチには次のことが含まれます。

1. 対象となる要素の選択アニメーション。
2. 「webkitAnimationEnd」イベントにイベント リスナーを追加します。
3. イベント トリガー時にアニメーションをリセットします。

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

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

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

jQuery の実装

jQuery を利用すると、簡略化された構文:

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

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

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

クロスブラウザーの互換性を確保するには、ブラウザー検出ライブラリの利用を検討してください。 CSS3 遷移テストは、さまざまなブラウザーの正しいイベント名とアニメーション プロパティを特定するのに役立つサポート オブジェクトを提供します。

// Browser detection object
var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style;
    return {
        transform: divStyle.MozTransform  ||
                   divStyle.MsTransform   ||
                   divStyle.WebkitTransform ||
                   divStyle.OTransform    ||
                   divStyle.transform,
        transition: divStyle.MozTransition ||
                    divStyle.MsTransition   ||
                    divStyle.WebkitTransition ||
                    divStyle.OTransition    ||
                    divStyle.transition
    };
}());

このアプローチでは、適切なイベント名とアニメーション プロパティを活用することで、クロスブラウザー互換の方法での CSS アニメーション。

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