使用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編碼

回答

相關問題