溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

四個(gè)基本的JavaScript函數(shù)來(lái)馴服CSS3過(guò)渡和動(dòng)畫(huà)（3.1）

發(fā)布時(shí)間：2020-08-08 23:16:34 來(lái)源：ITPUB博客 閱讀：159 作者：cenfeng 欄目：web開(kāi)發(fā)

3.1）檢測(cè)CSS關(guān)鍵幀動(dòng)畫(huà)何時(shí)開(kāi)始，迭代或結(jié)束

CSS Transition的哥哥，CSS關(guān)鍵幀動(dòng)畫(huà)讓我們通過(guò)在CSS“時(shí)間軸”上定義點(diǎn)以及在這些點(diǎn)上參與的CSS屬性值來(lái)為CSS屬性設(shè)置動(dòng)畫(huà)。 使用JavaScript，我們可以類(lèi)似地插入關(guān)鍵幀動(dòng)畫(huà)的重要狀態(tài)，特別是當(dāng)關(guān)鍵幀動(dòng)畫(huà)已經(jīng)開(kāi)始，迭代或完全結(jié)束時(shí)。 相關(guān)的事件是 animationstart ，  animationiteration 和 animationend 分別。

再一次，為了使現(xiàn)實(shí)更好，我們需要考慮支持3個(gè)事件的前綴版本的舊瀏覽器。 隨著中說(shuō)，我們可以把以下內(nèi)容函數(shù)返回的受支持版本 animationstart ， animationiteration 或 animationend ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function getanimationevent(suffix){ // enter "start", "iteration", or "end"<font></font>
     var root = document.documentElement<font></font>
     var suffix = suffix.toLowerCase()<font></font>
     var animations = {<font></font>
         'animation' : 'animation' + suffix,<font></font>
         'OAnimation' : 'oAnimation' + suffix.charAt(0).toUpperCase() + suffix.slice(1), // capitalize first letter of suffix<font></font>
         'MozAnimation' : 'animation' + suffix,<font></font>
         'WebkitAnimation' : 'webkitAnimation' + suffix.charAt(0).toUpperCase() + suffix.slice(1)<font></font>
     }<font></font>
     <font></font>
     for ( var a in animations){<font></font>
         if (root.style[a] !== undefined ){<font></font>
             return animations[a]<font></font>
         }<font></font>
     }<font></font>
     return undefined<font></font>
}<font></font>
<font></font>
// getanimationevent('start') // returns supported version of "animationstart" event as a string<font></font>
// getanimationevent('iteration') // returns supported version of "animationiteration" event as a string<font></font>
// getanimationevent('end') // returns supported version of "animationend" event as a string<font></font>
<font></font>
//Example usage:<font></font>
var animationend = getanimationevent( 'end' )<font></font>
if (animationend ){<font></font>
     element.addEventListener(animationend , function (e){<font></font>
         // do something after end of keyframe animation<font></font>
     }, false )<font></font>
}

該  事件對(duì)象 一旦填充了一些屬性，如 event.elapsedTime ，它返回以秒為關(guān)鍵幀動(dòng)畫(huà)的持續(xù)時(shí)間。


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手