| 标题 | javascript判断css3动画结束 css3动画结束的回调函数 |
| 范文 | 本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束，主要是使用了javascript的回调函数，其思路是一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持，非常的简单实用，推荐给大家。 css3 的时代，css3--动画 一切皆有可能； javascript判断css3动画结束 css3动画结束的回调函数 三联 传统的js 可以通过回调函数判断动画是否结束；即使是采用CSS技术生成动画效果，JavaScript仍然能捕获动画或变换的结束事件； transitionend事件和animationend事件标准的浏览器事件，但在WebKit浏览器里你仍然需要使用webkit前缀，所以，我们不得不根据各种浏览器分别检测事件 代码如下: var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' } 下面附上源代码： 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>suface js判断css动画是否结束</title> </head> <body> <p>一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持。<br> </p> <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: .5s;*/ transition-duration:3s; } .sample.hide { opacity: 0; } </style> <div>css3动画过度慢慢隐藏（transition-duration:3s;）</div> <p><button onclick="this.style.display='none';startFade();">慢慢消退，检测结束事件</button></p> <script> (function() { var e = document.getElementsByClassName('sample')[0]; function whichTransitionEvent(){ var t; var el = document.createElement('fakeelement'); 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'; } })();<br></script> </body> </html> 以上就是本文所述的关于javascript判断CSS3动画结束的方法，希望大家能够喜欢 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。