
使用JavaScript 重新觸發WebKit CSS 動畫
在CSS 中,動畫是有時間限制的序列,可以使用@ 應用於元素- webkit-關鍵影格規則。但是,在某些情況下,可能需要在不使用逾時或多個動畫的情況下重新觸發動畫。
一個解決方案是利用animationEnd 事件,該事件在動畫完成時觸發。在 WebKit 瀏覽器中,此事件稱為 webkitAnimationEnd。將事件偵聽器附加到元素,可以在動畫完成後重設動畫。
事件驅動的重置
在普通 JavaScript 中:
1 2 3 4 5 6 7 8 9 | var element = document.getElementById( 'box' );
element.addEventListener( 'webkitAnimationEnd' , function (){
this.style.webkitAnimationName = '' ;
}, false);
document.getElementById( 'button' ).onclick = function (){
element.style.webkitAnimationName = 'shake' ;
};
|
登入後複製
在jQuery:
1 2 3 4 5 6 7 | var $element = $( '#box' ).bind( 'webkitAnimationEnd' , function (){
this.style.webkitAnimationName = '' ;
});
$( '#button' ).click( function (){
$element .css( 'webkitAnimationName' , 'shake' );
});
|
登入後複製
跨瀏覽器相容性
對於跨瀏覽器支持,可以使用 CSS3 轉換測試等庫。它提供了一個支援對象,可以偵測各種CSS 屬性和事件,包括動畫支援:
1 2 3 4 5 6 7 8 9 | var css3AnimationSupport = ( function (){
var div = document.createElement( 'div' ),
divStyle = div.style,
support = {
transition: ...
transform: ...
animation: ...
};
}());
|
登入後複製
透過使用此支援對象,可以偵測每個瀏覽器的動畫屬性和事件,從而實現一致的處理跨多個平台的CSS 動畫。
以上是如何使用 JavaScript 重新觸發 WebKit CSS 動畫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!