針對animationend和transitionend多次執行的問題解決方案

對於animationend事件來說的話，如果我們在外層添加這個事件監聽，如果監聽元素里面還有動畫，則里面元素動畫結束也會執行這個animationend事件。所以我們可以這樣做：

if(e.target === this) {
    console.log('end');
}

或者

if(e.target === e.currentTarget) {
    console.log('end');
}

對於transitionend事件多次執行，一般情況下是因為監聽元素有多個屬性同時變化，所以執行多次transitionend事件，而且如果里面有子元素還會監聽子元素的end事件，所以我們針對transitionEnd事件需要這樣做：

var transitionFlag = true;
wrap.addEventListener('webkitTransitionEnd',function(e){
    if(e.target === e.currentTarget && transitionFlag) {
        transitionFlag = false;
        console.log('end');
    }
},false);

或者

var transitionFlag = true;
wrap.addEventListener('webkitTransitionEnd',function(e){
    if(e.target === this && transitionFlag) {
        transitionFlag = false;
        console.log('end');
    }
},false);

這個可以說是最終解決方案了。

 

注：transitionend的事件只有三種形式，之所以不檢測MozTransitionEnd，msTransitionEnd 這兩個的事件，因為火狐和IE都已經支持了transitionend，相反的對於加前綴反而不執行事件，oTransitionEnd  代表的是歐朋瀏覽器，transitionend 一定要小寫 否則瀏覽器不識別，webkitTransitionEnd中T和E是一定要大寫的，w大小寫是無所謂的！

 

 

 animationend的事件只有兩種形式：animationend和WebkitAnimationEnd(注意事件名稱的大小寫)

 

參考：http://wnworld.com/archives/191.html