3.1）检测CSS关键帧动画何时开始，迭代或结束

CSS Transition的哥哥，CSS关键帧动画让我们通过在CSS“时间轴”上定义点以及在这些点上参与的CSS属性值来为CSS属性设置动画。使用JavaScript，我们可以类似地插入关键帧动画的重要状态，特别是当关键帧动画已经开始，迭代或完全结束时。相关的事件是 animationstart ， animationiteration 和 animationend 分别。

再一次，为了使现实更好，我们需要考虑支持3个事件的前缀版本的旧浏览器。随着中说，我们可以把以下内容函数返回的受支持版本 animationstart ， animationiteration 或 animationend ：

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 ，它返回以秒为关键帧动画的持续时间。

ITPub博客

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

3.1）检测CSS关键帧动画何时开始，迭代或结束

最新文章