使用webkitTransitionEnd编码

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

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

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

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

这有效，但在有更多动画时无法使用。假设我想在50个动画结束后在不同时间回拨一个功能。

来源

2010-12-20 felixlaumon

你能澄清你的意思的，你有两个转变办呢？一次只允许每个元素有一个转换。 – 2010-12-26 21:19:10

@Ken：可能通过并行触发两个动画，例如，在同一时间并排动画两个div。 – 2011-02-05 19:34:49

如果您希望在事件发生后删除事件，则PS使用$（this）.one（）而不是绑定。 – Tokimon 2011-02-22 15:30:36

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

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

来源

2012-03-05 18:28:29 Fresheyeball

使用webkitTransitionEnd编码

回答

相关问题