js怎样判断transition执行完毕

答案:1 悬赏:40 手机版

解决时间 2021-01-04 03:28

提问者网友：夢醒日落
2021-01-03 22:29

最佳答案

五星知识达人网友：廢物販賣機
2021-01-03 22:58

<!doctype html> <html> <head> <meta charset="utf-8"> <title>suface js判断css动画是否结束</title> </head> <body> 一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持。 <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> <div class="sample">css3动画过度慢慢隐藏（transition-duration:3s;）</div> <button onclick="this.style.display='none';startFade();">慢慢消退，检测结束事件</button> <script> ;(function() { var e = document.getElementsByClassName('sample')[0]; function whichTransitionEvent(){ var t, el = document.createElement('surface'), 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运动结束！我是回调函数，没有使用第三方类库！'); e. removeEventListener(transitionEvent,arguments.callee,false);//销毁事件 }); startFade = function() { e.className+= ' hide'; } })(); </script> </body> </html> //兼容性详情

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！