使用 webkitTransitionEnd 进行编码

发布于 2024-10-08 02:08:04 字数 528 浏览 0 评论 0原文

我正在编写一个使用 webkitTransitionEnd 事件的 Web 应用程序（适用于 iPad）。

我想在第二次转换结束时回调函数。之所以有两个过渡，是因为其中一个具有 -webkit-transition-delay 属性，因此两个动画不会同时结束。由于这是一系列动画，因此我只想在第二次转换完成时调用该函数。

我当前（愚蠢）的解决方法是将事件绑定在事件内，这在 jQuery 中看起来像这样。

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

这可行，但当动画较多时则不可用。假设我想在 50 个在不同时间结束的动画之后回调一个函数。

原文

I am coding a web app (for iPad) that uses the event webkitTransitionEnd.

I want to call back a function when the second transition is ended. The reason why there are two transitions is because one has a -webkit-transition-delay property so they two animations don't end at the same time. Since this is a series of animation, I want to call the function only when the second transition is finished.

My current (stupid) workaround is to bind the event inside an event, which looks something like this in jQuery.

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

This works but it is not usable when there are more animations. Say if I want call back a function after 50 animations which ends at different time.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

把人绕傻吧 2024-10-15 02:08:04

这尚未经过测试，但应该会给您一个好主意。

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

This isn't tested but should give you a good idea.

function waitOnTransition(elem, endIndex, callback){
    var transitionIndex = 0;
    $(elem).on('webkitTransitionEnd', function(){
        if(transitionIndex == endIndex){
            callback();
        }else{
            transitionIndex++;
        }
    });
}
waitOnTransition('#elemID', 3, function(){
   //do stuff
});

You could also do it with 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
});

回复收藏 0 原文

~没有更多了~