宜宾网站建设公司

四个基本的JavaScript函数来驯服CSS3过渡和动画（3.1）

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){ // enter "start", "iteration", or "end"
     var root = document.documentElement
     var suffix = suffix.toLowerCase()
     var animations = {
         'animation' : 'animation' + suffix,
         'OAnimation' : 'oAnimation' + suffix.charAt(0).toUpperCase() + suffix.slice(1), // capitalize first letter of suffix
         'MozAnimation' : 'animation' + suffix,
         'WebkitAnimation' : 'webkitAnimation' + suffix.charAt(0).toUpperCase() + suffix.slice(1)
     }
    
     for ( var a in animations){
         if (root.style[a] !== undefined ){
             return animations[a]
         }
     }
     return undefined
}
// getanimationevent('start') // returns supported version of "animationstart" event as a string
// getanimationevent('iteration') // returns supported version of "animationiteration" event as a string
// getanimationevent('end') // returns supported version of "animationend" event as a string
//Example usage:
var animationend = getanimationevent( 'end' )
if (animationend ){
     element.addEventListener(animationend , function (e){
         // do something after end of keyframe animation
     }, false )
}

该  事件对象 一旦填充了一些属性，如 event.elapsedTime ，它返回以秒为关键帧动画的持续时间。


文章名称：四个基本的JavaScript函数来驯服CSS3过渡和动画（3.1）
网址分享：http://ybzwz.com/article/pjocgs.html

其他资讯