animationend和transitionend多次执行的问题解决方案

对于animationend事件来说的话，如果我们在外层添加这个事件监听，如果监听元素里面还有动画，则里面元素动画结束也会执行这个animationend事件。所以我们可以这样做：

$('.ele').on('animationend webkitAnimationEnd',function(e){
    if(e.target === this) {
        console.log('end');
    }
})

或

$('.ele').on('animationend webkitAnimationEnd',function(e){
    if(e.target === e.currentTarget) {
        console.log('end');
    }
})

对于transitionend事件多次执行，一般情况下是因为监听元素有多个属性同时变化，所以执行多次transitionend事件，而且如果里面有子元素还会监听子元素的end事件，所以我们针对transitionEnd事件需要这样做：
var transitionFlag = true;

//ele.addEventListener('webkitTransitionEnd',function(e){},false);
$('.ele').on('transitionend webkitTransitionEnd',function(e){
    if(e.target === e.currentTarget && transitionFlag) {
        transitionFlag = false;
        console.log('end');
    }
})

或
$('.ele').on('transitionend webkitTransitionEnd',function(e){
    if(e.target === this && transitionFlag) {
        transitionFlag = false;
        console.log('end');
    }
})