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

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

WebKit を利用した CSS アニメーションを操作する場合、再トリガーする必要がある場合があります。最初の実行後にアニメーションをトリガーします。タイムアウトや複数のアニメーションに依存せずにこれを実現するには、組み込みイベント「webkitAnimationEnd」を利用できます。

このイベントはアニメーションが完了すると発生し、プログラムでリセットして再起動できるようになります。その方法は次のとおりです。

プレーン JavaScript の場合:

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

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // Prevent default browser behavior here if needed.
};

jQuery の場合:

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // Prevent default browser behavior here if needed.
});

このアプローチでは、オンデマンドで CSS アニメーションを再トリガーするクリーンで効果的な方法。これにより、複雑なタイムアウトや追加のアニメーションが不要になり、スムーズでシームレスな移行が保証されます。

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