js检测css3动画是否执行完毕代码实例
由于硬件的进步,现在css3虽然说不上已经达到普及的程度,起码也可以说应用已经非常广泛。
css3能够实现流畅的动画效果,在实际应用中可能需要有这样的效果,那就是能够检测动画执行完毕进而执行相应的代码。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> .sample{ width:200px; height:200px; border:1px solid green; background:lightgreen; opacity:1; margin-bottom:20px; transition-property:opacity; transition-duration:3s; } .sample.hide{ opacity:0; } </style> <script> window.onload=function(){ var obt=document.getElementById("bt"); (function() { var e=document.getElementsByClassName('sample')[0]; function whichTransitionEvent(){ var t; var el=document.createElement('antzone'); var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' } for(t in transitions){ if( el.style[t] !== undefined ){ return transitions[t]; } } } var transitionEvent = whichTransitionEvent(); transitionEvent && e.addEventListener(transitionEvent, function() { alert('css3动画结束'); }); startFade = function() { e.className+= ' hide'; } })(); obt.onclick=function(){ this.style.display='none'; startFade(); } } </script> </head> <body> <div class="sample"></div> <input type="button" id="bt" value="查看效果"/> </body> </html>
上面的代码实现了我们的要求,下面介绍一下他的实现过程。
一.代码注释:
(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。(2).var obt=document.getElementById("bt"),获取id属性值为bt的元素对象,这里就是按钮。
(3).(function() {})()一个匿名自执行函数。
(4).var e=document.getElementsByClassName('sample')[0],获取class属性值为sample集合中的第一个元素。
(5).function whichTransitionEvent(){},此函数实现f返回对象的事件名称。
(6).var t,声明一个变量,会在后来的for循环中使用。
(7) .var el=document.createElement('antzone'),创建一个元素对象。
(8).var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
},此对象直接量中存储的是对应的事件名称,大家可能都知道由于浏览器的兼容问题css3的属性可能需要在属性前面加上浏览器的标志,比如-webkit-transform-style或者-moz-transform-style等,这里的动画事件transitionend也是如此。
(9).for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
},前面创建的el元素其实就是用来检测支持何种形式的transitionend事件,找出对应的然后返回。
(10).var transitionEvent = whichTransitionEvent(),返回事件名称。
(11).transitionEvent && e.addEventListener(transitionEvent, function() {
alert('css3动画结束');
}),注册事件处理函数。
(12).startFade = function() {
e.className+= ' hide';
},此函数可以为元素再添加一个class样式类,新添加的样式类可以设置元素透明度为0。
二.相关阅读:
(1).getElementsByClassName()方法可以参阅getElementsByClassName()一章节。
(2).document.createElement()方法可以参阅document.createElement()一章节。
(3).addEventListener()方法可以参阅addEventListener()一章节。
(4).className可以参阅js className一章节。
(5).transitionend事件可以参阅javascript transitionend事件一章节。