我正在编写一个使用事件webkitTransitionEnd的Web应用程序(用于iPad).
我希望在第二次转换结束时回调函数.有两个转换的原因是因为一个具有-webkit-transition-delay属性,因此它们的两个动画不会同时结束.由于这是一系列动画,我想仅在第二次转换完成时调用该函数.
我当前(愚蠢的)解决方法是将事件绑定到事件中,在jQuery中看起来像这样.
$(this).bind('webkitTransitionEnd',function(){
$(this).bind('webkitTransitionEnd',function(){
\*some code here*\
$(this).unbind();
});
$(this).unbind();
});
这有效,但是当有更多动画时它不可用.假设我想在50个动画之后回调一个函数,该动画在不同的时间结束.
解决方法
这没有经过测试,但应该给你一个好主意.
function waitOnTransition(elem,endIndex,callback){
var transitionIndex = 0;
$(elem).on('webkitTransitionEnd',function(){
if(transitionIndex == endIndex){
callback();
}else{
transitionIndex++;
}
});
}
waitOnTransition('#elemID',3,function(){
//do stuff
});
你也可以用咖喱做
function makeTransitionEnd(endIndex){
var endIndex = endIndex;
var out = function(elem,callback){
var transitionIndex = 0;
$(elem).on('webkitTransitionEnd',function(){
if(transitionIndex == endIndex){
callback();
}else{
transitionIndex++;
}
});
});
return out;
}
//make curry
var waitForThreeEnds = makeTransitionEnd(3);
waitForThreeEnds('#elemID',function(){
//do stuff
});
