webkitTransitionEnd is triggered before repaint/reflow

Question

I am trying to make a progressBar whitch change its width when I make an ajax request, I want the ajax callback execute only after the animation of the progressBar is end, I use this code:

css:

#progressBar{
    position: fixed;
    top: 0;
    left: 0;
    background: black;
    height: 3px;
    width: 0;
    transition: width 0.1s linear;
}   

js:

 var endProgressBar = function(){
                var bodyWidth = getComputedStyle(document.body).width;
                var scrolbarWidth = getComputedStyle(progressBar).width;
                console.log(scrolbarWidth  == bodyWidth )   //true but in reality not       
                param.success(req.responseText)
            }

...
        if(lastAffectWidth > 99){
                        progressBar.addEventListener("webkitTransitionEnd", endProgressBar,false);
                        progressBar.addEventListener("Transitionend", endProgressBar,false);
                        progressBar.addEventListener("otransitionend", endProgressBar,false);
                        progressBar.style.width = 100 + '%'
                    }

but the callback 'endProgressBar' is called before the width is 100% on my screen

the only solution I found it's to add a setTimeout of 200ms but I don't like this solution.

What I don't understant it is that getComputedStyle(document.body).width; return me the same value that getComputedStyle(progressBar).width but it is not the case in reality.

Thanks

Answer 1

I solved my pb by replace the width transition by a translate transition and calling offsetWidth on dom element after the translate3d has changed.