javascript判断css3动画结束 css3动画结束的回调函数_javascript技巧

var transitions = {
       'transition':'transitionend',
       'OTransition':'oTransitionEnd',
       'MozTransition':'transitionend',
       'WebkitTransition':'webkitTransitionEnd'
     }

一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持。

慢慢消退，检测结束事件

<script> <br /> (function() {<br /> var e = document.getElementsByClassName('sample')[0];<br /> function whichTransitionEvent(){<br /> var t;<br /> var el = document.createElement('fakeelement');<br /> var transitions = {<br /> 'transition':'transitionend',<br /> 'OTransition':'oTransitionEnd',<br /> 'MozTransition':'transitionend',<br /> 'WebkitTransition':'webkitTransitionEnd'<br /> }<br /> for(t in transitions){<br /> if( el.style[t] !== undefined ){<br /> return transitions[t];<br /> }<br /> }<br /> }<br /> var transitionEvent = whichTransitionEvent();<br /> transitionEvent && e.addEventListener(transitionEvent, function() {<br /> alert('css3运动结束！我是回调函数，没有使用第三方类库！');<br /> });<br /> startFade = function() {<br /> e.className+= ' hide';<br /> }<br /> })();<br></script>