如何使用 JavaScript 重新觸發 WebKit CSS 動畫？

使用JavaScript 重新觸發WebKit CSS 動畫

在CSS 中，動畫是有時間限制的序列，可以使用@ 應用於元素- webkit-關鍵影格規則。但是，在某些情況下，可能需要在不使用逾時或多個動畫的情況下重新觸發動畫。

一個解決方案是利用animationEnd 事件，該事件在動畫完成時觸發。在 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中文網其他相關文章！