webkitAnimationEnd事件與webkitTransitionEnd事件

寫一個焦點圖demo，css3動畫完成之後要把它隱藏掉，這裏會用到css3的事件，之前沒有接觸過，結果查了一下發現這是一片新天地啊，並且裏面還有好多坑，好比重複動畫屢次觸發什麼的。anyway，我仍是先抓住有用的吧！任何能爲我所用的都是有用的，任何不能爲我所用的都是沒用的，任何我能學會掌握的都是有用的，我學不會的，再屌也沒用！

 

//捕捉webkitAnimationEnd事件
element.addEventListener('webkitAnimationEnd', end, false);

//捕捉webkitTransitionEnd事件
element.addEventListener('webkitTransitionEnd', end, false); 

function end(){
    //code
}

沒什麼難以理解的，看代碼就能明白。

 

可是這裏有個參數有小坑，下面是我本身寫的end方法

function transitionEnd(e){
    if(e.propertyName=="-webkit-transform"){
        this.parentNode.style.visibility="hidden";
    }
}

就是那個event參數，我怎麼都進不到那個if分支裏，究其緣由，我把e打印出來看一下，並無"-webkit-transform"這樣一個propertyName，只有一個叫"transform"的，因此我就改爲了下面這樣。

function transitionEnd(e){
    if(e.propertyName=="-webkit-transform" || e.propertyName=="transform"){
        this.parentNode.style.visibility="hidden";
    }
}

反正坑挺多的，隨時console.log()吧！