js檢測css3動畫是否執行完畢代碼實例
由于硬件的進步，現在css3雖然說不上已經達到普及的程度，起碼也可以說應用已經非常廣泛。
css3能夠實現流暢的動畫效果，在實際應用中可能需要有這樣的效果，那就是能夠檢測動畫執行完畢進而執行相應的代碼。
代碼實例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/" />
<title>實例</title>
<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>
<script>
window.onload=function(){
var obt=document.getElementById("bt");
(function() {
var e=document.getElementsByClassName('sample')[0];
function whichTransitionEvent(){
var t;
var el=document.createElement('antzone');
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';
}
})();
obt.onclick=function(){
this.style.display='none';
startFade();
}
}
</script>
</head>
<body>
<div class="sample"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>上面的代碼實現了我們的要求，下面介紹一下他的實現過程。
一.代碼注釋:
（1）.window.onload=function(){}，當文檔內容完全加載完畢再去執行函數中的代碼。（2）.var obt=document.getElementById("bt")，獲取id屬性值為bt的元素對象，這里就是按鈕。
（3）.(function() {})()一個匿名自執行函數。
（4）.var e=document.getElementsByClassName('sample')[0]，獲取class屬性值為sample集合中的第一個元素。
（5）.function whichTransitionEvent(){}，此函數實現f返回對象的事件名稱。
（6）.var t，聲明一個變量，會在后來的for循環中使用。
（7） .var el=document.createElement('antzone')，創建一個元素對象。
（8）.var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}，此對象直接量中存儲的是對應的事件名稱，大家可能都知道由于瀏覽器的兼容問題css3的屬性可能需要在屬性前面加上瀏覽器的標志，比如-webkit-transform-style或者-moz-transform-style等，這里的動畫事件transitionend也是如此。
（9）.for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}，前面創建的el元素其實就是用來檢測支持何種形式的transitionend事件，找出對應的然后返回。
（10）.var transitionEvent = whichTransitionEvent()，返回事件名稱。
（11）.transitionEvent && e.addEventListener(transitionEvent, function() {
alert('css3動畫結束');
})，注冊事件處理函數。
（12）.startFade = function() {
e.className+= ' hide';
}，此函數可以為元素再添加一個class樣式類，新添加的樣式類可以設置元素透明度為0。
（1）.getElementsByClassName()方法可以參閱getElementsByClassName()一章節。
（2）.document.createElement()方法可以參閱document.createElement()一章節。
（3）.addEventListener()方法可以參閱addEventListener()一章節。
（4）.className可以參閱js className一章節。
（5）.transitionend事件可以參閱javascript transitionend事件一章節。
相關推薦
-
javascript獲取函數定義的參數個數
在實際應用中可能獲取一個函數定義的參數個數，也就是形參的數目。代碼實例如下:function func(,b){ vr num; rturn num=+b;}consol.log(fun
-
JavaScript函數體代碼
實際應用中，可能需要通過一個函數的名字來獲取函數體。下面通過代碼實例介紹一下如何實現此功能。代碼實例如下：function func(,b){ vr num; rturn num=+b;}
-
jQuery 隱藏具有指定class屬性值的元素
本章節分享一段代碼實例，它實現了隱藏具有指定clss屬性值的元素。代碼如下：
-
點擊實現隱藏元素本身代碼實例
本章節分享一段代碼實例，它實現了點擊隱藏元素本身的效果。代碼實例如下uth
-
點擊按鈕實現隱藏一個元素代碼實例
本章節分享一段代碼實例，它實現了點擊一個按鈕隱藏指定元素的功能。代碼實例如下
