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

2024-11-12 技术教程

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

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

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

1234567891011121314151617181920212223242526272829function getanimationevent(suffix){ // enter "start", "iteration", or "end"var root = document.documentElementvar 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，它返回以秒为关键帧动画的持续时间。