对于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');
}
})