针对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