我正在编写一个使用事件 webkitTransitionEnd
的网络应用程序(适用于 iPad)。
我想在第二个 过渡结束时回调一个函数。之所以有两个转换是因为其中一个具有 -webkit-transition-delay
属性,因此它们两个动画不会同时结束。由于这是一系列动画,我只想在第二个过渡完成时调用该函数。
我当前(愚蠢的)解决方法是将事件绑定(bind)到一个事件中,这在 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
});
你也可以用 curry 来做
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
});
关于jquery - 使用 webkitTransitionEnd 编码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4486336/