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

如何透過 JavaScript 重新觸發 WebKit CSS 動畫

此問題解決使用 JavaScript 重新觸發 CSS 動畫的問題。現有的動畫規則「@-webkit-keyframes shake」定義了晃動效果，但隨後嘗試透過 JavaScript 再次啟動它卻失敗了。

提供的解決方案利用了「animationEnd」事件，特別是「webkitAnimationEnd」 WebKit 瀏覽器。當此事件被觸發時，表示動畫完成。

要重新觸發動畫，會在元素中加入「webkitAnimationEnd」事件的事件偵聽器。收到此事件後，元素的「webkitAnimationName」樣式屬性將被清除，從而有效地重設動畫。

範例（純香草 JavaScript）：

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

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // You may want to prevent default action here.
};

範例(jQuery):

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // You may want to prevent default action here.
});

跨瀏覽器支援：

對於跨瀏覽器支持，可以使用「css3AnimationSupport」物件偵測到CSS不同瀏覽器支援的過渡、變換和動畫屬性。

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style;

    return {
        transition: (function(){
            return divStyle.MozTransition     === ''? {name: 'MozTransition'   , end: 'transitionend'} :
                (divStyle.MsTransition     === ''? {name: 'MsTransition'    , end: 'msTransitionend'} :
                (divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} :
                (divStyle.OTransition      === ''? {name: 'OTransition'     , end: 'oTransitionEnd'} :
                (divStyle.transition       === ''? {name: 'transition'      , end: 'transitionend'} :
                false))));
        })()
        // ... Other detections omitted for brevity
    };
}());

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