首頁 > web前端 > css教學 > 如何使用 JavaScript 重新觸發 WebKit CSS 動畫?

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

DDD
發布: 2024-12-19 17:09:17
原創
1049 人瀏覽過

How Can I Re-trigger WebKit CSS Animations with JavaScript?

使用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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板