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

強制重新觸發 WebKit CSS 動畫

使用 WebKit CSS 動畫時，嘗試多次重新觸發動畫時可能會出現限制。本文解決了此類場景，並提供了透過 JavaScript 重新啟動 CSS 動畫的解決方案，而無需訴諸逾時或其他動畫。

為了實現此目的，WebKit 瀏覽器利用「webkitAnimationEnd」事件，該事件在動畫完成時觸發。動畫循環。透過利用此事件，可以透過程式重置和重新啟動動畫。

Vanilla 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');
});

跨瀏覽器>

// 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
    };
}());

為了跨瀏覽器相容性，請考慮使用瀏覽器偵測程式庫。 CSS3 轉換測試提供了一個支援對象，可以幫助識別不同瀏覽器的正確事件名稱和動畫屬性。 透過利用適當的事件名稱和動畫屬性，此方法可以重新觸發以跨瀏覽器相容的方式實作 CSS 動畫。

以上是如何使用 JavaScript 可靠地重新觸發 WebKit CSS 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！