作者：思铮同学要努力工作 | 来源：互联网 | 2023-06-02 13:35
3.1）检测CSS关键帧动画何时开始，迭代或结束
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){
var
root = document.documentElement
var
suffix = suffix.toLowerCase()
var
animatiOns= {
&＃39;animation&＃39;
:
&＃39;animation&＃39;
+ suffix,
&＃39;OAnimation&＃39;
:
&＃39;oAnimation&＃39;
+ suffix.charAt(0).toUpperCase() + suffix.slice(1),
&＃39;MozAnimation&＃39;
:
&＃39;animation&＃39;
+ suffix,
&＃39;WebkitAnimation&＃39;
:
&＃39;webkitAnimation&＃39;
+ suffix.charAt(0).toUpperCase() + suffix.slice(1)
}
for
(
var
a
in
animations){
if
(root.style[a] !== undefined ){
return
animations[a]
}
}
return
undefined
}
var
animatiOnend= getanimationevent(
&＃39;end&＃39;
)
if
(animationend ){
element.addEventListener(animationend ,
function
(e){
},
false
)
}
|
该
事件对象
一旦填充了一些属性，如
event.elapsedTime
，它返回以秒为关键帧动画的持续时间。
京公网安备 11010802041100号