我正在编写一个使用该事件的网络应用程序(适用于 iPad)
webkitTransitionEnd
.
我想在 second 转换结束时回调一个函数。有两个过渡的原因是因为一个有一个
-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
});