使用 webkitTransitionEnd 编码答案

【问题标题】：Coding with webkitTransitionEnd使用 webkitTransitionEnd 编码
【发布时间】：2011-05-28 01:05:21
【问题描述】：

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

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

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

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

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

【问题讨论】：

你能澄清一下你有两个过渡的意思吗？每个元素一次只能有 1 个转换。
@Ken：可能是通过并行触发两个动画，例如，同时为两个 div 设置动画。
PS 使用 $(this).one() 而不是 bind 如果你想在事件触发后删除它。
@tokimon，谢谢！这行得通！

标签： jquery events ios mobile-safari

【解决方案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
});

【讨论】：