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

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

1 个答案: