原生js判断css动画结束 css 动画结束的回调函数
生活随笔
收集整理的這篇文章主要介紹了
原生js判断css动画结束 css 动画结束的回调函数
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
原文:原生js判斷css動畫結(jié)束 css 動畫結(jié)束的回調(diào)函數(shù)
</script> </body> </html>
css3 的時代，css3--動畫 一切皆有可能；
?
傳統(tǒng)的js 可以通過回調(diào)函數(shù)判斷動畫是否結(jié)束；即使是采用CSS技術(shù)生成動畫效果，JavaScript仍然能捕獲動畫或變換的結(jié)束事件；
?
transitionend事件和animationend事件標準的瀏覽器事件，但在WebKit瀏覽器里你仍然需要使用webkit前綴，所以，我們不得不根據(jù)各種瀏覽器分別檢測事件
var transitions = {'transition':'transitionend','OTransition':'oTransitionEnd','MozTransition':'transitionend','WebkitTransition':'webkitTransitionEnd'}?
?
下面附上源代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>suface js判斷css動畫是否結(jié)束</title> </head><body><p>一旦動畫或變換結(jié)束，回調(diào)函數(shù)就會觸發(fā)。不再需要大型類庫支持。<br> http://www.webhek.com/css-animation-callback/ 來源于web駭客</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 class="sample">css3動畫過度慢慢隱藏（transition-duration:3s;）</div> <p><button οnclick="this.style.display='none';startFade();">慢慢消退，檢測結(jié)束事件</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運動結(jié)束！我是回調(diào)函數(shù)，沒有使用第三方類庫！');});startFade = function() {e.className+= ' hide';}})();</script> </body> </html>
總結(jié)
以上是生活随笔為你收集整理的原生js判断css动画结束 css 动画结束的回调函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 刷题09
- 下一篇： JVM之JVM内存区域与内存分配(转载)