重绘/回流前触发webkitTransitionEnd

Question

当我发出ajax请求时，我正在尝试使progressBar改变其宽度，我希望ajax回调仅在progressBar动画结束后执行，我使用以下代码：

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 + '%'
                    }

但在屏幕宽度为100%时调用了回调'endProgressBar‘

我找到的唯一解决方案是添加200ms的setTimeout，但我不喜欢这个解决方案。

我不理解的是，getComputedStyle(document.body).width；返回给我的值与getComputedStyle(progressBar).width的值相同，但实际情况并非如此。

谢谢