本文主要給大家介紹的是如何使用javascript判斷CSS3動畫效果結束，主要是使用了javascript的回調函數，其思路是一旦動畫或變換結束，回調函數就會觸發。不再需要大型類庫支持，非常的簡單實用，推薦給大家。

css3 的時代，css3--動畫 一切皆有可能；

傳統的js 可以通過回調函數判斷動畫是否結束；即使是采用CSS技術生成動畫效果，JavaScript仍然能捕獲動畫或變換的結束事件；

transitionend事件和animationend事件標準的瀏覽器事件，但在WebKit瀏覽器里你仍然需要使用webkit前綴，所以，我們不得不根據各種瀏覽器分別檢測事件

代碼如下:

var transitions = {

'transition':'transitionend',

'OTransition':'oTransitionEnd',

'MozTransition':'transitionend',

'WebkitTransition':'webkitTransitionEnd'

}

下面附上源代碼：

代碼如下:

suface js判斷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;

}

css3動畫過度慢慢隱藏(transition-duration:3s;)

慢慢消退，檢測結束事件

(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';

}

})();

以上就是本文所述的關于javascript判斷CSS3動畫結束的方法，希望大家能夠喜歡

總結

以上是生活随笔為你收集整理的html动画效果结束返回,javascript判断css3动画结束 css3动画结束的回调函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。