Question

I want to set animating = false once the transition animation is ended, I used settimeout , it works ok on desktop but the timing is wrong on ipad, Is it possible to know the css animation of an object ended exactly?

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

The end of the CSS transition triggers a transitionEnd event, so you can know exactly. These events are using the vendor prefixes, so you need to deal with that … for Chrome/Webkit, it’s webkitTransitionEnd:

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

Obligatory JSFiddle