javascript - 我怎么知道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 过渡的结束会触发一个transitionEnd事件，因此您可以准确地知道。这些事件使用供应商前缀，因此您需要处理...对于 Chrome/Webkit，它是webkitTransitionEnd：

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

强制性 JSFiddle