如何在webkit中使用CSS trasforms實現onComplete函數？

Question

我使用一些CSS轉換類似如下：

.slide_left { 
    -webkit-transition: all 0.25s ease-in; 
    -webkit-transform: translate3d(-320px,0px,0px); 
} 

我想有，當這種轉變完成後運行的JavaScript回調函數。我在網絡上看到過它的提示，但我無法在任何地方找到文檔或示例。有人在那裏成功了嗎？

現在，我使用setTimeout來猜測持續時間，但它比我想要的要笨重。

謝謝！

---

解決方案：（！感謝kprevas）

在下面的代碼片段，當顯示 「詳細信息」 DIV的 「whole_display」 DIV幻燈片留下來揭示它。隱藏時，whole_display向右滑動以隱藏它。這是用JQuery編寫的，並在Safari 5.0.3上測試過。

<style type="text/css"> 
.slide_left { 
    -webkit-transition: all 0.25s ease-in; 
    -webkit-transform: translate3d(-320px,0px,0px); 
} 
.slide_right { 
    -webkit-transition: all 0.25s ease-in; 
    -webkit-transform: translate3d(0px,0px,0px); 
} 
</style> 

<script type="text/javscript"> 
function clearDetail() { 
    $("#whole_display").get(0).addEventListener('webkitTransitionEnd', finishClearPlanDetail); 
    $("#whole_display").removeClass("slide_left") 
    $("#whole_display").addClass("slide_right") 

} 

function finishClearDetail(event) { 
    $("#whole_display").removeClass("slide_right"); 
    $("#whole_display").get(0).removeEventListener('webkitTransitionEnd', finishClearPlanDetail); 
} 

</script> 

Answer 1

使用「webkitTransitionEnd」事件。

box.addEventListener('webkitTransitionEnd', function(event) { 
    alert("Finished transition!"); 
}, false); 

見http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/Transitions.html

Answer 2

還可以使用removeEventlistener('webkitTransitionEnd',calee,false) 當你想刪除此添加的事件。否則每次DOM元素應用一些動畫時都會觸發它。