溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS Transition的哥哥，CSS關鍵幀動畫讓我們通過在CSS“時間軸”上定義點以及在這些點上參與的CSS屬性值來為CSS屬性設置動畫。
使用JavaScript，我們可以類似地插入關鍵幀動畫的重要狀態，特別是當關鍵幀動畫已經開始，迭代或完全結束時。
相關的事件是
animationstart
，
animationiteration
和
animationend
分別。
再一次，為了使現實更好，我們需要考慮支持3個事件的前綴版本的舊瀏覽器。
隨著中說，我們可以把以下內容函數返回的受支持版本
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>
}
|
該
事件對象
一旦填充了一些屬性，如
event.elapsedTime
，它返回以秒為關鍵幀動畫的持續時間。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
