使用webkitTransitionEnd进行编码

我正在编写一个使用事件webkitTransitionEnd的网络应用程序（用于iPad）。我希望在第二次转换结束时回调函数。有两个转换的原因是因为一个具有-webkit-transition-delay属性，因此它们的两个动画不会同时结束。由于这是一系列动画，我想仅在第二次转换完成时调用该函数。我当前（愚蠢的）解决方法是将事件绑定到事件中，在jQuery中看起来像这样。

$(this).bind('webkitTransitionEnd', function(){
   $(this).bind('webkitTransitionEnd', function(){
      *some code here*
      $(this).unbind();
   });
   $(this).unbind();
});

这有效，但是当有更多动画时它不可用。假设我想在50个动画之后回调一个函数，该动画在不同的时间结束。

已邀请:

1 个回复

慰泥悍瓶

这没有经过测试，但应该给你一个好主意。

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
});

要回复问题请先登录或注册

使用webkitTransitionEnd进行编码

1 个回复

发起人

问题状态

使用webkitTransitionEnd进行编码

与内容相关的链接

1 个回复

发起人

问题状态