我正在编写一个使用事件webkitTransitionEnd的Web应用程序(用于iPad).
我希望在第二次转换结束时回调函数.有两个转换的原因是因为一个具有-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
- });
