我如何知道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