我如何知道css過渡動畫結束？

Question

我想設置animating = false一旦過渡動畫結束，我用settimeout，它在桌面上工作正常，但在iPad的時機是錯誤的，是否有可能知道對象的CSS動畫完全結束？

CSS：

#pane{ -webkit-transition: -webkit-transform 1s ease-out ; } 

的JavaScript：

function css_translate(j, k) { 
    var i = 'translate(' + k + 'px,0px)'; 
    j.css({ 
     'transform': i, 
     '-moz-transform': i, 
     '-webkit-transform': i, 
     '-o-transform': i, 
    }); 
} 
if (animating == false) { 
    animating = true; 
    css_translate($pane, handler.page[handler.currentp + 1] * -1); 
} 
setTimeout(function() { 
    handler.animating = false; 
}, transitiontime); 

Answer 1

的CSS過渡triggers a transitionEnd event末，這樣你就可以確切地知道。這些事件是使用供應商的前綴，所以你需要處理的是...爲Chrome/Webkit的，這是webkitTransitionEnd：

j.on('webkitTransitionEnd', function(event) { 
    handler.animating = false; 
}); 

Obligatory JSFiddle