《javascript推断css3动画结束 css3动画结束的回调函数_.docx》由会员分享，可在线阅读，更多相关《javascript推断css3动画结束 css3动画结束的回调函数_.docx（5页珍藏版）》请在三一文库上搜索。
1、javascript推断css3动画结束 css3动画结束的回调函数_ 本文主要给大家介绍的是如何用法javascript推断CSS3动画效果结束，主要是用法了javascript的回调函数，其思路是一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持，特别的简洁有用，推举给大家。 css3 的时代，css3-动画 一切皆有可能； javascript推断css3动画结束 css3动画结束的回调函数 三联 传统的js 可以通过回调函数推断动画是否结束；即使是采纳CSS技术生成动画效果，JavaScript仍旧能捕获动画或变换的结束大事； transitionend大事和animation
2、end大事标准的扫瞄器大事，但在WebKit扫瞄器里你仍旧需要用法webkit前缀，所以，我们不得不依据各种扫瞄器分别检测大事 代码如下: var transitions = transition:transitionend, OTransition:oTransitionEnd, MozTransition:transitionend, WebkitTransition:webkitTransitionEnd 下面附上源代码： 代码如下: !doctype html html head meta charset=utf-8 titlesuface js推断css动画是否结束/title /h
3、ead 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
4、 div class=samplecss3动画过度慢慢隐蔽（transition-duration:3s;）/div pbutton 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 transition
5、s = transition:transitionend, OTransition:oTransitionEnd, MozTransition:transitionend, WebkitTransition:webkitTransitionEnd for(t in transitions) if( el.stylet != undefined ) return transitionst; var transitionEvent = whichTransitionEvent(); transitionEvent e.addEventListener(transitionEvent, function() alert(css3运动结束！我是回调函数，没有用法第三方类库！); ); startFade = function() e.className+= hide; )();br/script /body /html 以上就是本文所述的关于javascript推断CSS3动画结束的方法，盼望大家能够喜爱 更多信息请查看IT技术专栏 .