js檢測css3動畫是否執行完畢程式碼例項

antzone發表於2017-04-03
JSCSSS3動畫

由於硬體的進步，現在css3雖然說不上已經達到普及的程度，起碼也可以說應用已經非常廣泛。

css3能夠實現流暢的動畫效果，在實際應用中可能需要有這樣的效果，那就是能夠檢測動畫執行完畢進而執行相應的程式碼。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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事件一章節。

相關文章