我怎么知道css过渡动画结束了?

时间:2012-12-03 04:07:09

标签: javascript jquery

我希望在转换动画结束后设置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);

1 个答案:

答案 0 :(得分:0)

CSS转换结束triggers a transitionEnd event,因此您可以准确了解。这些事件正在使用供应商前缀,因此您需要处理...对于Chrome / Webkit,它是webkitTransitionEnd

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

Obligatory JSFiddle