如何動態重新觸發 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中文網其他相關文章！